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
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.
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.
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.