How Appcues is Overlaid

Appcues uses the CSS z-index property to overlay flows (hotspots, modals, etc.) on your web application. The CSS varies depending on the element it is attached to, but generally, we strive to be the top-most element on the page. In order to do that, we set a very high z-index value, like 99999999999.

Change the Z-Index

Sometimes our high z-index value will conflict with the existing elements on your page and you may need to adjust the Appcues z-index down a bit so the page looks as it should. 

Tooltips/hotspots

You can override the above high z-index value for each step inside of our Chrome Editor. To do so, select the 'cog' icon in the editor to open up the side bar. Under 'Individual Tooltip' select 'Placement' and scroll until the 'z-index  Override' field is displayed (red box in lower left of screen below). 

Type in a number that is one below the z-index of the conflicting element in your application and your changes will be automatically saved. 

Modals/Slideouts

The only way to modify the z-index for a modal or slideout is to add the below snippet to the code in your application. If this is something you'd like to see in the product instead, be sure to let us know here.

Here's the snippet to add to your application. Feel free to modify the number to suit your needs.

appcues-container {
z-index: 100;

}

Still need help? Contact Us Contact Us