All Collections
Creating Experiences
Using Custom CSS
Using CSS Layering to adjust where your Experience shows up
Using CSS Layering to adjust where your Experience shows up

Learn to use the z-index property in custom CSS to solve element overlapping

Tiago Mota avatar
Written by Tiago Mota
Updated over a week ago

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.

  1. Add a custom CSS rule to target the element you want to adjust

  2. Use the Z-index property 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.

Looking for more?

Did this answer your question?