Z-Index

CodyFrame includes a default set of z-index variables:

: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 */
}

If you're working with CodyFrame v4 or up, pass the $z-index map to the config module to customize the z-index scale:

@use 'config' as * with (
  $z-index: (
    'header': '3',
    'popover': '5',
    'fixed-element': '10',
    'overlay': '15'
  )
);

If you're using CodyFrame v3, create a _z-index.scss file inside the custom-style folder and overwrite the z-index variables.

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

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

Utility Classes #

For a full list of z-index utility classes, please refer to the utilities page.