0

es algo que crei encontrar una rapida respuesta en google pero no fue asi. Si un elemento es posicionado fijo con css (position:fixed;) no lo afecta el scroll, esto es muy practico para los navbars, bien. Ahora ese elemento sale del flujo y todo lo que esta por debajo no lo tiene en cuenta. Hay alguna manera de posicionar un elemento fijo sin salir del flujo? como si tuviese una posicion static? No me sirve el hack de poner un elemento igual debajo porque el menu varia su altura segun ciertas condiciones.

1 respuesta 1

1

sabes una mejor opción es manejar position: sticky; top: 0; en un navbar para que permanezca dentro del flujo

h2{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding:2rem;
}
*{
margin:0;
}
<h2>
EL PERMANESE FIJO PERO OCUPANDO ESPACION XD
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit ab sed nobis ullam possimus error commodi dolor quos ratione consequuntur voluptatem debitis, veritatis eveniet doloremque aut assumenda eius. Inventore, possimus.
Voluptas voluptatem laborum dolores quos. Voluptas fugit earum soluta necessitatibus exercitationem sapiente in cumque excepturi ullam reprehenderit aspernatur, cum laudantium repellat at veritatis impedit quaerat illum eum, accusantium consequatur dicta!
Impedit labore in harum iure, et hic facilis? Quam delectus esse reprehenderit facere, asperiores corrupti dolores accusamus beatae libero culpa praesentium optio, a excepturi repellendus nisi error at eligendi ad!
Nesciunt fuga temporibus voluptates, error pariatur beatae omnis maxime deleniti veritatis molestias quod consectetur repellendus nemo unde. Esse expedita dolor aliquam molestiae! Praesentium hic maiores sunt. Asperiores assumenda impedit dicta.
Voluptate aliquid suscipit earum sunt asperiores, eum deserunt saepe adipisci eos harum, dolore rerum quidem debitis quae quisquam pariatur ducimus culpa dolores eveniet beatae. Ut fugit aut qui sequi tempore!</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit ab sed nobis ullam possimus error commodi dolor quos ratione consequuntur voluptatem debitis, veritatis eveniet doloremque aut assumenda eius. Inventore, possimus.
Voluptas voluptatem laborum dolores quos. Voluptas fugit earum soluta necessitatibus exercitationem sapiente in cumque excepturi ullam reprehenderit aspernatur, cum laudantium repellat at veritatis impedit quaerat illum eum, accusantium consequatur dicta!
Impedit labore in harum iure, et hic facilis? Quam delectus esse reprehenderit facere, asperiores corrupti dolores accusamus beatae libero culpa praesentium optio, a excepturi repellendus nisi error at eligendi ad!
Nesciunt fuga temporibus voluptates, error pariatur beatae omnis maxime deleniti veritatis molestias quod consectetur repellendus nemo unde. Esse expedita dolor aliquam molestiae! Praesentium hic maiores sunt. Asperiores assumenda impedit dicta.
Voluptate aliquid suscipit earum sunt asperiores, eum deserunt saepe adipisci eos harum, dolore rerum quidem debitis quae quisquam pariatur ducimus culpa dolores eveniet beatae. Ut fugit aut qui sequi tempore!</p>

2
  • 1
    si estas manejando un framework trata de cambiarlo con css !important
    – junior
    Commented el 10 mar. 2021 a las 20:08
  • muchisimas gracias, conocia la opcion pero como siempre se usa para menues sticky no me daba cuenta que poniendo top:0 se solucionaba Commented el 10 mar. 2021 a las 20:15

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.