Z-Index

Z-index options in CodyFrame.

CodyFrame includes a set of z-index custom properties in the _base.scss file:

:root {
  --zindex-header: 3; // e.g., main header
  --zindex-popover: 5; // e.g., tooltips and dropdown
  --zindex-fixed-element: 10; // e.g., 'back to top' button
  --zindex-overlay: 15; // e.g., modals and dialogs
}

Here's an example of how to use these variables:

.modal {
  z-index: var(--zindex-overlay);
}

Optionally, you can overwrite the default z-index variables and set 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.