> For the complete documentation index, see [llms.txt](https://docs.linkspotapp.com/llms.txt). > Use it to discover all available pages before exploring further. # Elements appear under or above another page element Adjust the global z-index for LinkSpot elements when they appear behind or on top of other content on your storefront (theme headers, banners, popups, drawers). 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 (hotspots, 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.