Elements appear under or above another page element

Sometimes a LinkSpot element ends up hidden behind another page element on your storefront (a sticky header, a promo banner, a quick-view popup), or on top of something it should not cover (a theme drawer, a chat widget). This is a CSS layering issue, controlled by z-index.

LinkSpot exposes a single z-index setting that applies to all of its elements at once. You can find it in Settings > General, in the Compatibility settings card.

Open the setting

1. In the LinkSpot admin, open Settings > General.

2. Scroll to the Compatibility settings card.

3. Find the Elements z-index field.

The default value is 11. The in-app help text reads: "The 'z-index' of the elements to ensure they are on top of other elements. Default is 11."

Pick the right direction

The fix depends on which way the layering is wrong:

• A LinkSpot element is hidden behind something. Increase the z-index. Try a value higher than the z-index of the page element covering it.

• A LinkSpot element appears on top of something it should sit under. Decrease the z-index. Try a value lower than the z-index of the page element being covered.

Save the change and reload your storefront to verify.

How to find the right number

If you do not know what z-index the conflicting page element uses, you can inspect it in your browser:

1. On the storefront, right-click the conflicting element and pick Inspect (or open Developer Tools).

2. In the Styles panel, look for the z-index property. If it is a number (for example, z-index: 100), pick a LinkSpot value above or below it depending on which direction you need.

3. If the conflicting element does not set a z-index explicitly, it sits at the default of auto. In that case, any positive number on LinkSpot's side pushes it above.

A safe starting point: 1, 11 (default), 100, 1000. Pick the smallest value that resolves the conflict; pushing the value too high can cause new conflicts with other apps or with modal layers.

Scope and limits

• The setting is global. There is no per-element z-index. Changing this value moves all LinkSpot elements (pins, badges, buttons, captions, annotations, product sets, and the rendered collage overlay) together.

• Some interactive layers (such as quick-view popups or media modals) may apply their own z-index on top of this setting so they always sit above other content. Those layers are not affected by this field.

• If you change the value and elements still appear wrong, the issue may not be z-index. It could be related to overflow clipping on a parent container, or to a stacking context created by a transform or filter property on a parent element. In those cases, send the details to LinkSpot support.

When to leave it at the default

Most stores never need to change the z-index. The default of 11 is high enough to sit above standard product page elements without colliding with typical app drawers and modal layers. Adjust only when you can see a specific layering problem on your storefront.