Necesito hacer que la posicion del header y el nav sea fixed sin alterar la posicion del contenido que le sigue

publicado por: Anonymous

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%;
}

solución

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.

_x000D_

_x000D_

header {_x000D_
  position: fixed;_x000D_
  top: 0; left: 0; right: 0;_x000D_
  background: blue;_x000D_
  height: 50px;_x000D_
}_x000D_
_x000D_
nav {_x000D_
  position: fixed;_x000D_
  top: 50px; left: 0; right: 0;_x000D_
  background: red;_x000D_
  height: 20px;_x000D_
}_x000D_
_x000D_
#relleno {_x000D_
  height: 70px;  _x000D_
}

_x000D_

<header>Este es el header</header>_x000D_
<nav>Este es el NAV</nav>_x000D_
<div id="relleno"></div>_x000D_
<p>Este es el elemento que siguie</p>_x000D_
<p>y otro mas</p>_x000D_
<p>y otro mas</p>_x000D_
<p>y otro mas</p>_x000D_
<p>y otro mas</p>_x000D_
<p>y otro mas</p>_x000D_
<p>y otro mas</p>_x000D_
<p>y otro mas</p>_x000D_
<p>y otro mas</p>_x000D_
<p>y otro mas</p>_x000D_
<p>y otro mas</p>_x000D_
<p>y otro mas</p>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *