Place div on top of the page problems - html

Question

So, to make a div (navbar) stay on top of the page I need to have a fixed position. This I know and works fine. But on the current web design I am working on this navbar ends up behind all of the other elements. The difference between now and the previous times is that I am using javascript to modify the placement of the content depending on how the user scrolls. This also works fine but the navbar ends up behind all of these elements. After googling I found that I could use z-index and an absolute or relative position. But I need a fixed one to have it on top..
What is a good way to do this?
What do I need to have in mind?
I am not sure what is actually relevant here but..
#nav {
position:fixed;
top:0;
width:100%;
height:50px;
z-index:999;
}
#header {
position:absolute;
top:0;
left:0;
transition: 0.6s;
}
#wrapper {
width:100%;
position:absolute;
top:45%;
left:-10px;
transition: 0.6s;
}

Answer 1

Use z-index for the placement of the navbar. You may try this setting by varying z-index value in the browser unless you get the desired result. Try to enforce z-index using css rather than script (in case you are trying it with the script).

Answer 2

Try use css in your navbar:
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
Exapmle:
.navbar{
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
background: #555;
width: 100%;
}
.item {
color: rgba(255,255,255,0.75);
font-weight: bold;
list-style-type: none;
margin-right: 5px;
float:left;
padding: 10px;
background: #555;
cursor: pointer;
} .item:hover {
color: rgba(255,255,255,1);
background: #999;
}
.page{
position: absolute;
top: 40px;
left 0px;
}
<div>
<div class='navbar'>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
<div class='page'>
Some long text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>