Skip to main content Skip to docs navigation
En GitHub

Posición

Utiliza estos helpers para configurar rápidamente la posición de un elemento.

En esta página

Fijo en la parte superior

Coloca un elemento en la parte superior del viewport, de borde a borde. Asegúrate de comprender las ramificaciones de la posición fija en tu proyecto; es posible que debas agregar CSS adicional.

<div class="fixed-top">...</div>

Fijo en la parte inferior

Coloca un elemento en la parte inferior del viewport, de borde a borde. Asegúrate de comprender las ramificaciones de la posición fija en tu proyecto; es posible que deba agregar CSS adicional.

<div class="fixed-bottom">...</div>

Pegajoso en la parte superior

Coloca un elemento en la parte superior del viewport, de borde a borde, pero solo después de que el scroll lo pase.

<div class="sticky-top">...</div>

Responsive y pegajoso en la parte superior

También existen variaciones responsive para la utilidad .sticky-top.

<div class="sticky-sm-top">Pegajoso en la parte superior de viewports tamaño SM (small) o más ancho</div>
<div class="sticky-md-top">Pegajoso en la parte superior de viewports tamaño MD (medium) o más ancho</div>
<div class="sticky-lg-top">Pegajoso en la parte superior de viewports tamaño LG (large) o más ancho</div>
<div class="sticky-xl-top">Pegajoso en la parte superior de viewports tamaño XL (extra-large) o más ancho</div>
<div class="sticky-xxl-top">Pegajoso en la parte superior de viewports tamaño XXL (extra-extra-large) o más ancho</div>

Pegajoso en la parte inferior

Coloca un elemento en la parte inferior del viewport, de borde a borde, pero solo después de que el scroll lo pase.

<div class="sticky-bottom">...</div>

Responsive y pegajoso en la parte inferior

También existen variaciones responsive para la utilidad .sticky-bottom.

<div class="sticky-sm-bottom">Pegajoso en la parte inferior de viewports tamaño SM (small) o más ancho</div>
<div class="sticky-md-bottom">Pegajoso en la parte inferior de viewports tamaño MD (medium) o más ancho</div>
<div class="sticky-lg-bottom">Pegajoso en la parte inferior de viewports tamaño LG (large) o más ancho</div>
<div class="sticky-xl-bottom">Pegajoso en la parte inferior de viewports tamaño XL (extra-large) o más ancho</div>
<div class="sticky-xxl-bottom">Pegajoso en la parte inferior de viewports tamaño XXL (extra-extra-large) o más ancho</div>