z-index

The 📁 base/_z-index.scss file contains a set of variables that you can use to set the z-index of your components.

Here's the list of all available z-index variables:

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

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

Bear in mind that z-index values are affected by the stacking context. Think of it this way: when you apply a position: fixed; to your header, that component represents a new stacking context. Therefore a child within the header (e.g., a logo with no z-index specified) will be "above" a child that sits within another component (e.g., a sidebar) whose z-index is lower than the one of your header, even if the latter child has a z-index value defined.

With that in mind, it's preferable to apply the z-index variables to the main/layout components (e.g., header and aside), rather than to the elements within those components (e.g., logo and buttons).