In this library, several components utilize z-index. This document will let you know the order of the z-index in components.
This library leverages z-index for stacking elements. Avoid modifying z-index values to prevent layout disruptions.
The z-index property helps manage the overlay and layout of elements relative to one another, controlling their arrangement along the z-axis. Customizing these values is not recommended, as it may disrupt the intended layout.
| Component | Class | Value (z-index) |
|---|---|---|
| Dropdown | .dropdown .backdrop | 10 |
| Dropdown | .dropdown-content | 11 |
| Sticky positioned | .sticky, [class$=:sticky] | 20 |
| Navbar | .theui-navbar | 21 |
| Fixed positioned | .fixed, [class$=:fixed] | 30 |
| Offcanvas | .offcanvas | 40 |
| Modal | .modal | 50 |
| Popup | .popup | 60 |
| Tooltip | .tooltip | 70 |
| Notifications | .notifications | 80 |
Important Notes
- The predefined z-index values ensure components stack and function correctly.
- Modifying these values is discouraged to prevent layout and overlay issues