Posição

Use esses utilitários abreviados para configurar rapidamente a posição de um elemento.

Valores comuns

As classes de posicionamento rápido estão disponíveis, embora não sejam responsivas.

<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>

Parte superior fixa

Posicione um elemento na parte superior da viewport, de ponta a ponta. Certifique-se de entender as ramificações da posição fixa em seu projeto; pode ser necessário adicionar CSS adicional.

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

Parte inferior fixa

Posicione um elemento na parte inferior da viewport, de ponta a ponta. Certifique-se de entender as ramificações da posição fixa em seu projeto; pode ser necessário adicionar CSS adicional.

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

Parte superior pegajosa

Posicione um elemento na parte superior da viewport, de ponta a ponta, mas somente depois de passar por ele. O .sticky-toputilitário usa CSS position: sticky, que não é totalmente suportado em todos os navegadores.

IE11 e IE10 serão renderizados position: stickycomo arquivos position: relative. Dessa forma, agrupamos os estilos em uma @supportsconsulta, limitando a aderência apenas aos navegadores que podem renderizá-la corretamente.

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