0

Tengo el siguiente código de CSS para que el header y el nav se quede en el mismo lugar cuando le de scroll a la página, pero el contenido que le sigue se posiciona en la parte superior de la página quedando debajo del header y el nav oculto. Necesito acomodarlo y que se posicione después del nav.

     header{
     position: fixed;
     margin-top: -10px;
     background-color: gray;
     margin-left: -8PX;
     padding: 1px;
     margin-top: -41PX;
     padding-left: 15px;
     color: white;
     width: 100%;

}

    nav{
    background: #2D787B; 
    margin-left: -8px;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top-color: white;
    border-top-width: 3px;
    border-top-style: solid;
    position: fixed;
    margin-top: 35px;
    width: 100%;
}

1 respuesta 1

2

Los elementos fixed son retirados del flujo normal del documento y se muestran como un contexto separado, por lo que no ocupan lugar en la secuencia de elementos. Una opción es poner un elemento vacío que ocupe dicho espacio y que sea parte del flujo normal de la pagina. Esto funciona si los elementos tienen una altura conocida y si es al principio de la pagina.

Ejemplo simplificado: el <header> y el <nav> suman en total 70 pixels CSS de altura por lo que el "relleno" también debe ocupar es alto.

header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: blue;
  height: 50px;
}

nav {
  position: fixed;
  top: 50px; left: 0; right: 0;
  background: red;
  height: 20px;
}

#relleno {
  height: 70px;  
}
<header>Este es el header</header>
<nav>Este es el NAV</nav>
<div id="relleno"></div>
<p>Este es el elemento que siguie</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>

1
  • que se hace cuando colocas un glyphicon ese si se sigue posicionando encima del header Commented el 1 sept. 2018 a las 23:20

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.