Posición

Utilice estas utilidades abreviadas para configurar rápidamente la posición de un elemento.

Valores comunes

Hay clases de posicionamiento rápido disponibles, aunque no responden.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

Tapa fija

Coloque un elemento en la parte superior de la ventana gráfica, de borde a borde. Asegúrese de comprender las ramificaciones de la posición fija en su proyecto; es posible que deba agregar CSS adicional.

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

Fondo fijo

Coloque un elemento en la parte inferior de la ventana gráfica, de borde a borde. Asegúrese de comprender las ramificaciones de la posición fija en su proyecto; es posible que deba agregar CSS adicional.

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

Parte superior pegajosa

Coloque un elemento en la parte superior de la ventana gráfica, de borde a borde, pero solo después de pasar por él. La .sticky-top utilidad utiliza CSS position: sticky , que no es totalmente compatible con todos los navegadores.

IE11 e IE10 se mostrarán position: sticky como archivos position: relative . Como tal, ajustamos los estilos en una @supports consulta, limitando la adherencia a solo los navegadores que pueden representarla correctamente.

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

Alineación de elementos

Clase utilizaria para alinear elementos

La clase .bottom-0 nos permitirá alinear elementos para la posición vertical inferior.

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