Chameleon's great at reading the different types of elements on your page and enables you to control how you position your Experience in your app. If you find that an Experience or a Trigger overlaps your product elements, you can leverage custom CSS to ensure it displays correctly.
Availability & Usage
🔐 Available for all plans
🧑💻 Developers can help
📍 Here for better Tours, Tooltips, 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:
z-index: auto; (default value that sets the stack order equal to its parents)
z-index: 1; /2,3,4, etc. (negative numbers work too, sets the stack order of the element)
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.
Add a custom CSS rule to target the element you want to adjust
Use the
Z-indexproperty to adjust its position
You can adjust the z-index relative to any anchored element if the Step or Launcher is positioned relative to an element.
🧑💻 If you're having issues identifying the z-index value you're trying to adjust, ask your developer to help out; sometimes the value can look different, or may be nested in a deeper menu.