Z-Indices #
Z-values (z-index) control the stacking order of overlapping elements along the visual z-axis, determining which elements appear in front of others. Consistent values for positioning objects on the z-axis ensure that the same components always layer correctly over one another.
Custom Properties #
| Custom Property | Value | Usage |
|---|---|---|
--afp-z-base |
0 |
Standard layout, non-overlapping |
--afp-z-sticky |
10 |
Fixed or sticky navigation areas |
--afp-z-dropdown |
20 |
Select/dropdown menus and context menus |
--afp-z-popover |
30 |
Overlay elements close to their trigger |
--afp-z-tooltip |
40 |
Small, contextual hints |
--afp-z-modal |
50 |
Dialogs and side panels |
--afp-z-overlay |
60 |
Dimmed background layers behind modals |
--afp-z-toast |
70 |
System messages/alerts |
--afp-z-critical |
80 |
Temporary layer for exceptional cases (use sparingly) |