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
    Commented el 27 oct. 2021 a las 17:40
  • @DavidFloresGarcía voy
    – Ssnov
    Commented 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
    Commented el 27 oct. 2021 a las 17:48
  • @Daniel voy a probar
    – Ssnov
    Commented el 27 oct. 2021 a las 17:52
  • @Daniel Genial, resuelto.
    – Ssnov
    Commented el 27 oct. 2021 a las 17:55

1 respuesta 1

1

Solución: Cambiar position: fixed; a

position: sticky;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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