🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%


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.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us