91roseri 91roseri - 3 months ago 8
CSS Question

HTML,CSS: Header appears behind the other content

Im trying to do a fixed header but it hides behind the rest of the content on the screen. I've tried to change the z-index but it doesn't work.

My html file looks like this:

<body>

<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="first-sec">
</div>
<div class="second-sec">
</div>
<div class="third-sec">
</div>
<div class="fourth-sec">
</div>
</div>
</body>


and my css looks like this:

body{
margin:0;
}
.header{
width:100%;
height:88px;
position: fixed;
left:0;
top:0;
}

.content{
margin-top: 100px;
}
.first-sec{
width:100%;
height:608px;
background: black;
opacity: 0.8;
}
.second-sec{
width:100%;
height:89px;
}
.third-sec{
width:100%;
height:665px;
}
.fourth-sec{
width:100%;
height:317px;
background: rgba(40,40,40,0.85);
}


What am I doing wrong?

Answer

Change your header selector like this:

.header{
    width:100%;
    height:88px;
    position: fixed;
    left:0;
    top:0;
    z-index: 9;
    background: #009ddc; /* for test */
}

It's working.