Z-Index
CodyFrame includes a default set of z-index variables:
:root {
--z-index-header: 3; /* e.g., main header */
--z-index-popover: 5; /* e.g., tooltips and dropdown */
--z-index-fixed-element: 10; /* e.g., 'back to top' button */
--z-index-overlay: 15; /* e.g., modals and dialogs */
}
If you're working with CodyFrame v4 or up, pass the $z-index
map to the config module to customize the z-index scale:
@use 'config' as * with (
$z-index: (
'header': '3',
'popover': '5',
'fixed-element': '10',
'overlay': '15'
)
);
If you're using CodyFrame v3, create a _z-index.scss file inside the custom-style folder and overwrite the z-index variables.
Here's an example of how to use these variables:
.modal {
z-index: var(--z-index-overlay);
}
Utility Classes #
For a full list of z-index utility classes, please refer to the utilities page.