z-index

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