Mastering z-index proves to be quite challenging for me at the moment. I am working on a webpage (#s01) that includes a fixed side navigation bar (#s03). The issue arises when I want a modal (#s02) to cover the entire layer, including the side navigation.
Despite setting the modal's z-index higher than that of the side nav, the side nav stubbornly remains on top. While adjusting the z-index dynamically with JavaScript could potentially solve the problem, I am determined to find a CSS-only solution.
This codepen example should illustrate my dilemma effectively.
What clever CSS technique can I employ to ensure that the sidenav is truly covered?
HTML
<div id="s01">
<div id="s02"></div>
</div>
<div id="s03"></div>
CSS
// main
#s01 {
position: relative;
width: 50vw;
height: 100vh;
background: red;
z-index: 1;
}
// reveal
#s02 {
display: none;
position: absolute;
left: 0;
top: 0;
width: 50vw;
height: 100vh;
background: darkblue;
z-index: 3;
}
//sidenav
#s03 {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 200px;
background: green;
z-index: 2;
}