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.