Understanding Z-index Issues
Z-index controls which elements appear in front of others on a webpage. Common z-index scenarios include:
A coded modal or submenu appearing above or below Candu content
Fixed navigation bars or headers overlapping with Candu components
Multiple overlays competing for visibility
Positioning Candu content above or below another integration, like a chat widget
When Z-index Becomes a Problem
If your modal, hotspot, or product tour is published and should be showing but isn't visible, you may be experiencing a z-index layering issue. This occurs when another page element, such as a fixed header, modal, navigation bar, sidebar, or third-party integration, has a higher z-index value, causing it to layer on top of and hide your content.
Diagnosing the problem
To confirm a Z-index issue, check if the Candu component exists on the page.
Navigate to the page where your content should appear
Open your browser's Developer Tools:
Mac:
Cmd + Option + IWindows/Linux:
Ctrl + Shift + IorF12
Go to the Console tab
Type this command
document.querySelectorAll('candu-component')and press Enter
Look at the results:
If you can see the Candu Component, but the content itself is not visible on the page, as in the example below, you've confirmed a z-index layering issue:
If you see an empty list (
[]): This isn't a z-index issue, see troubleshooting content not appearing
Fixing the Z-Index
To adjust the Z-Index, open your content in the Candu Editor:
In the Toolbox on the right, find the z-index setting (location varies by content type):
Modals/Overlays: Overlay position section
Tooltips: Tooltip position section
Hotspots: Beacon section
Increase the z-index value (Try 9999 as a starting point)
Publish the updated content and wait a few minutes before refreshing the page.
Need more help? Reach out to us via chat or email us at [email protected].