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

Projects

Progress value is 30%

Z-Index

Z-index options in CodyFrame.

CodyFrame includes a set of z-index custom properties in the '_base.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.

Project duplicated

Project created

Globals imported

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