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


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. Towards the bottom you'll see the z-index option. You'll see the results of your input here when in preview


The only way to modify the z-index for your modal or slideout is to add the below snippet to your application. If this is something you'd like to see in the product 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