If a Chameleon Experience is appearing behind other page elements — or appearing on top of elements it should sit beneath — the cause is a CSS stacking order conflict. This article explains how to identify which element is causing the conflict and how to resolve it using custom CSS.

🔐 Available for all plans

🧑‍💻 Developers can help

📍 Here for better Tours, Tooltips, Embeddables, Microsurveys, Launchers

⚙️ Adjust from the Builder

This property is useful in cases where several page elements may be overlapping each other, as this property sets the order of a positioned element and its descendants. Z-index adjusting works on elements that are positioned (e.g. absolute, relative, fixed) and flex items (children of flex elements)

With custom CSS you can leverage the z-index property along with the position property to set which page element should appear on top (or bottom) in your webpage. Here are the ranges you can use:

You can apply this in the Builder to your Launcher Widget, or Tour Trigger, for example, and control where each should display in relation to the other elements on your page.

Here's how you can use CSS rules and the z-index property to adjust where your Experiences display and make sure they don't overlap with other elements on your page. Conflicting CSS rules on your website can prevent desired positioning adjustments of Chameleon widgets. These occur when your site's custom code overrides Chameleon's default styling, causing alignment issues.

You can adjust the z-index relative to any anchored element if the Step or Launcher is positioned relative to an element.

If the conflict persists, inspect the element again — the effective z-index may be set by a parent element or a CSS stacking context rather than the element itself. In this case, ask your developer to help trace the stacking context.