estoy intentando añadir contenido a mi web por css y a la hora de añadirlo me doy cuenta de que se queda detrás del header. He tratado de resolverlo con z-index, top, bottom, margin-top pero no ha resultado. Dejo aquí el code de mi header, del body, del html y adjunto una screenshot de como se muestra el div de prueba que he hecho.
Header:
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
display:block
}
.header{
z-index:999;
width:100%;
height:85px;
position:fixed;
background:#000
}
body:
body{
padding:0;
margin:0;
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
body,html{
height:100%;
background:#eeedea;
color:#000;
font-family:"Trebuchet MS";
font-size:100%;
font-style:normal;
line-height:1.5rem;
letter-spacing:0
}
html:
<header class="header">
<a href="#PageContent" class="visually-hidden show-for-focus">Skip navigation</a>
<a href="#cookieRoot" class="js-hook-cookie-preferences visually-hidden show-for-focus" tabindex="0">Cookie preferences</a>
<nav class="header__wrap--brands">
<div class="header-brands">
<div class="header-brands__title">
Nuestras marcas:
</div>
<div class="header-brands__logo header-brands__logo--black">
<img src="./assets/svg/generator.svg" alt="Generator logo">
</div>
<a id="ctl00_ucHeader_hlkFreehand" title="Freehand" class="header-brands__logo" href="https://freehandhotels.com/" target="_blank"><img id="ctl00_ucHeader_imgFreehand" src="./assets/svg/Frehand-logo.svg?ext=.svg" alt="Freehand logo" style="height:30px;"></a>
</div>
<div class="po">
<h1> Test</h1>
</div>
header
esfixed
(flotante fijo) por lo tanto se interpone arriba de todo el body, te recomiendo que usesposition: sticky;