Layering with z-index when using a sidenav and modal - html

Question

z-index is hard, too hard for me right now.
I have a page (#s01) with a fixed sidenav (#s03) and when called a modal (#s02) should cover the whole layer including the sidenav.
Right now the sidenav lays on top of it all despite having a lower z-index than the modal. Altering the z-index (on click) for the sidenav could fix the problem but I'm sure there's a solution without any JavaScript.
This codepen should demonstrate my problem quite well.
What CSS trickery is needed to actually cover the sidenav?
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;
}

Answer 1

Because fixed position element doesn't share the same parent element as the rest elements:
html
<div id="s01">
<div id="s02">Modal!</div>
<button id="mybutton">Click me!</button>
<div id="s03"></div>
</div>
codepen
The z-index property specifies the z-order of an element and its
descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.
z-index