Web Chat layers
Z-index & layers: how Quidget Web Chat stacks on your website
Sometimes your site UI (sticky headers, menus, cookie banners, etc.) can visually overlap the Quidget Web Chat.
This guide explains how z-index works, what z-index values Quidget uses, and how you can control which elements appear above or below the widget.
Quidget Web Chat z-index layers
Quidget Web Chat v2 runs inside an isolated iframe, controlled by a loader script. The widget uses fixed-position layers with stable z-index values:
- 902 — Quidget chat button
- 921 — Quidget chat window
- 903+ — anything you want above the button
- 922+ — anything you want above the chat window
Quick reference
| Quidget element | z-index | Your element must be |
|---|---|---|
| Chat button | 902 | 903+ to appear above it |
| Chat window | 921 | 922+ to appear above it |
Recommended approach
Decide which UI should be above what
Most sites want:
- Chat above sticky header (so close button is always usable)
- Full-screen elements (modals, menus) above chat when opened
So, usually:
- Header: below chat → set header z-index < 921
- Menus/modals: above chat → set those to >= 922
Practical examples
Example 1: Fix sticky header covering the chat
If your sticky header overlaps the chat header on mobile, make the header layer lower than the chat window.
✅ Solution: set header z-index below 921
/* Your sticky header */
.site-header {
position: sticky; /* or fixed */
top: 0;
z-index: 900; /* < 921 so Quidget chat stays on top */
}Example 2: Put your floating button above the Quidget chat button (but not above the chat window)
Use this if you want your UI above the widget button, but you still want the chat window to cover it when opened.
.my-floating-button {
position: fixed;
right: 24px;
bottom: 96px;
z-index: 903; /* above button (902), below chat window (921) */
}Example 3: Make your side menu or modal appear above the chat window
Use this for mobile menus, modals, or full-screen overlays:
.mobile-menu,
.modal-overlay {
position: fixed;
inset: 0;
z-index: 922; /* above chat window (921) */
}
