Z-Index
Z-index options in CodyFrame.
CodyFrame includes a set of z-index custom properties in the base/_z-index.scss file:
: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
}
Here's an example of how to use these variables:
.modal {
z-index: var(--z-index-overlay);
}
Optionally, you can overwrite the default z-index variables and create your own in the custom-style folder (e.g., you can create a _z-index.scss file to store them).
Utility Classes #
For a full list of z-index utility classes, please refer to the utilities page.