How to bring navigation div to the front - html

Question

i have a navigation bar that sticks to the top of the page as the user scrolls, however as the user continues to scroll down the page, the navigation menu seems to disappear behind some of the pages elements.
any help with this matter will be greatly appreciated, below is all the code.
* {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Segoe UI';
}
p,
h5 {
margin-bottom: 10px;
line-height: 1.5;
}
h5 {
text-align: center;
border: 1px solid #ccc;
border-width: 1px 0;
}
h5.fixed {
position: fixed;
top: 80px;
left: 0;
background-color: #fff;
right: 0;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
<h5>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">Tutorials</a></li>
<li class="about">About</li>
<li class="news">Newsletter</li>
<li class="contact">Contact</li>
</ul>
</div>
</h5>

Answer 1

There are few issues in you code. I could not understand why you using h5 in fixed div. To solve issue try this
h5.fixed {
position: fixed;
top: 80px;
left: 0;
background-color: #fff;
right: 0;
z-index:999;
}
But my suggestion is use some better way to implement fixed top menu. Please check this example https://getbootstrap.com/examples/navbar-fixed-top/

Answer 2

it was ok I guess but color of font was white so it was not visible, I changed it to #000 and its working, please correct if I'm wrong
Plus I added z-index: 9; for your website purpose, if nav is fixed then it will be higher in "z" dimension "above" all elements. Don't forget to use "position: relative/absolute/fixed" etc to make z-index working :)
* {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Segoe UI';
}
p,
h5 {
margin-bottom: 10px;
line-height: 1.5;
}
h5 {
text-align: center;
border: 1px solid #ccc;
border-width: 1px 0;
}
h5.fixed {
position: fixed;
top: 80px;
left: 0;
background-color: #fff;
right: 0;
}
.nav{
position: relative;
z-index: 9;
}
.nav a {
text-decoration: none;
color: #000;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
<h5>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">Tutorials</a></li>
<li class="about">About</li>
<li class="news">Newsletter</li>
<li class="contact">Contact</li>
</ul>
</div>
</h5>

Answer 3

Try using the z-index css property. This will allow you to place the element above others on the page.

Answer 4

Try to use this code: z-index property only active when the its elements has relative or absolute value. otherwise it does not work.
elementname {
position: relative;
z-index: 1;
}
please see this link: https://jsfiddle.net/emumsbgp/