Тег заголовка HTML5 перекрывает содержимое под ним ⇐ CSS

[Anonymous]

header{
width:100%;
background-color: #607D8B;
color:#8BC34A;
font-size:200%;
padding: 15px;
position: fixed;
z-index: 999;

}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

.image{
width: 100%;
}

body {

height: 1200px;
}< /code>


Aayushi
About
Experience
Contact







< /code>
< /div>
< /div>
< /p>

Я реализую базовый заголовок, чья позиция я указываю Как позиция: абсолютно, тогда он перекрывает контент под ним. < /p>

Почему это происходит? Даже если я добавляю в свой заголовок навигационный турнир на Navbar-Top, он перекрывает контент ниже! Ссылка CodePen - https://codepen.io/asinha/pen/mjzooj



Aayushi
About
Experience
Contact









header{
position: absolute;
top: 0;
left: 0;
right: 0;
z-index:10;
width:100%;
background-color: #607D8B;
height:10vh;
color:#8BC34A;
font-size:200%;
padding-top: 0.3em;

}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

.image{
width: 100%;
}

.div2{
margin-top:14%;
}


Подробнее здесь: https://stackoverflow.com/questions/445 ... s-below-it