sticky position CSS React - css

Question

I don't know why position: sticky doesn't work on my website.
Position: fixed works, but then my navbar and leftMenu are hidden under others components..
CSS
.NavBar{
padding: 0 15px 0 0px;
background-color: #6E81FB;
margin: 0px;
box-sizing: border-box;
height: 70px;
text-align: left;
display: flex;
line-height: 70px;
align-items: center;
border-bottom: 2px solid #575353;
position: sticky;
}
.UnloggedLeftMenu{
height: calc(100vh - 70px);
width: 70px;
background-color: #6E81FB;
padding: 20px 0 0 0;
border-right: 2px solid #575353;
box-sizing: border-box;
position: sticky;
}

Answer 1

#poldeeek, you should not use position: sticky in your case because it does not involve toggling between relative and fixed positions.
It can easily be achieved by position: fixed and you would need to set the z-index in order to push the elements above the rest.
Following is the CSS-
.NavBar{
padding: 0 15px 0 0px;
background-color: #6E81FB;
margin: 0px;
box-sizing: border-box;
height: 70px;
text-align: left;
display: flex;
line-height: 70px;
align-items: center;
border-bottom: 2px solid #575353;
position: fixed;
top: 0;
left: 0; right: 0; //To stretch the navbar full width
z-index: 99;
}
.UnloggedLeftMenu{
width: 70px;
background-color: #6E81FB;
padding: 20px 0 0 0;
border-right: 2px solid #575353;
box-sizing: border-box;
position: fixed;
left: 0;
top: 70px; bottom: 0; //To take the height excluding header; No need to specify height explicitly
z-index: 99;
}
body {
padding: 70px 0 0 70px; //To avoid hiding of main content
}
Hope this helps!