1

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.introducir la descripción de la imagen aquí

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>
5
  • Puedes por favor añadir el html en codigo y el como te lo muestra especificamente en una imagen,
    – DFG
    el 27 oct. 2021 a las 17:40
  • @DavidFloresGarcía voy el 27 oct. 2021 a las 17:41
  • es porque tu header es fixed (flotante fijo) por lo tanto se interpone arriba de todo el body, te recomiendo que uses position: sticky;
    – Roy
    el 27 oct. 2021 a las 17:48
  • @Daniel voy a probar el 27 oct. 2021 a las 17:52
  • @Daniel Genial, resuelto. el 27 oct. 2021 a las 17:55

1 respuesta 1

1

Solución: Cambiar position: fixed; a

position: sticky;

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.