I have a problem .. I have a header and below I want to place a section, but when creating the section, it is placed on top of the page in front of the header. I have a nav created that I want to be ahead, so I used the z-index (I guess the problem of the section has to do with the z-index, right?).
Thank you.
nav{
width: 1000px;
height: 75px;
background-color: #44acde;
margin: auto;
text-align: center;
z-index: 1;
position: absolute;
left: 50%;
transform: translate(-50%);
padding: 10px;
border-bottom: 700px;
}
nav ul {
display: flex;
margin: auto 0;
padding: 20px;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
nav li {
list-style: none;
}
nav a{
color: #fff;
font-size: 20px;
text-decoration: none;
padding: 10px;
}
nav a img{
height: 50px;
margin-top: 0px;
}
/*-----------------------HEADER-----------------------*/
header{
height: 1000px;
width: 100%;
background-color: #071d56;
z-index: 0;
margin-top: 0px;
position: absolute;
display: block;
}
header img{
margin-top: 200px;
}
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
opacity: .5;
}
/*-----------------------MAIN-----------------------*/
#main{
height: 400px;
width: 100%;
max-width: 1000px;
background-color: red;
position: absolute;
z-index: 0;
text-align: center;
display: block;
}