z index multiple elements - css

Question

hey guys I have 3 elements I'm using z-index and position property.
the first one is the main navbar (working fine)
the 2nd is sidenav
the 3rd is a button.
the button must have the position relative.
when I'm scrolling the main navbar is taking over the button which is great !
but the side navbar is not.
I did try to change the z-index on each element.
the mobile navbar is the main navbar which working fine.
.mobile-navbar {
background-color: rgb(0, 0, 0);
position: fixed;
z-index: 1;
width: 100%;
display: flex;
justify-content: space-between;
img {
background-color: rgba(0, 0, 0, 0.274);
}
div {
display: flex;
justify-content: center;
align-items: center;
a {
font-size: 2rem;
color: #fff;
margin: 5px;
text-decoration: none;
span {
background-color: red;
border-radius: 10px;
padding: 0 3px;
}
}
}
}
.side-nav {
position: fixed;
z-index: 0;
width: 100%;
height: 100vh;
transform: translateX(-100%);
transition: 300ms ease-out;
&-active {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgb(12, 6, 39);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateX(0);
transition: 300ms ease-out;
button.close-nav {
padding: 5px;
background-color: rgb(14, 12, 12);
color: #fff;
border: none;
font-size: 2rem;
font-weight: 700;
}
.dynamic-links {
height: 30%;
button {
padding: 5px;
font-size: 2rem;
background: rgba(0, 0, 0, 0);
color: #fff;
border: none;
}
.sidenav-link {
color: #fff;
text-decoration: none;
font-size: 2rem;
margin: 0 10px;
}
}
.sidenav-links {
display: flex;
flex-direction: column;
height: 50%;
.sidnav-link {
color: #fff;
margin: 10px 0;
font-size: 2rem;
text-decoration: none;
text-align: center;
}
}
}
}
the button I need to use position relative and taking over the side-navbar:
button {
position: relative;
z-index: 0;
cursor: pointer;
font-size: 1.3rem;
padding: 10px 15px;
border: none;
outline: #06a821;
border-radius: 30px;
color: #fff;
letter-spacing: 0.3rem;
background: linear-gradient(
90deg,
rgba(5, 116, 197, 1) 35%,
rgba(106, 183, 239, 1) 100%
);
transition: ease-in-out 300ms;
&::before {
position: absolute;
border: 1px solid #fff;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
border-radius: 30px;
content: "";
}

Answer 1

only had to add the z-index in the active class.
befor :
.side-nav {
position: fixed;
z-index: 0;
width: 100%;
height: 100vh;
transform: translateX(-100%);
transition: 300ms ease-out;
&-active {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgb(12, 6, 39);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateX(0);
transition: 300ms ease-out
after:
.side-nav {
position: fixed;
width: 100%;
height: 100vh;
transform: translateX(-100%);
transition: 300ms ease-out;
&-active {
position: fixed;
z-index: 1;
width: 100%;
height: 100vh;
background-color: rgb(12, 6, 39);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateX(0);
transition: 300ms ease-out;