The _z-index.scss file contains a set of variables to be used to set the z-index of your components. Feel free to add more according to the complexity of your project.

:root {
    --zindex-header: 2;
    --zindex-fixed-element: 5;
    --zindex-overlay: 10; // modals and dialogs

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).

We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.