Position

Controlam a propriedade position e alguns atalhos comuns de posicionamento fixo/sticky.

Valores base

Classe	position aplicado
.position-static	static (padrão do navegador)
.position-relative	relative — cria um contexto de posicionamento para filhos .position-absolute
.position-absolute	absolute
.position-fixed	fixed — posicionado em relação à viewport
.position-sticky	sticky — comporta-se como relative até atingir o limite de scroll, então “gruda”

Modificador de lado do sticky

Combine .position-sticky com um destes para fixar a borda correspondente em 0:

Classe	Efeito
.position-sticky--top	top: 0
.position-sticky--right	right: 0
.position-sticky--bottom	bottom: 0
.position-sticky--left	left: 0

Atalhos (shorthand)

Classe	Equivale a
.fixed-top	position: fixed; top: 0; right: 0; left: 0; — barra fixada no topo da tela, ocupando a largura toda
.fixed-bottom	position: fixed; right: 0; bottom: 0; left: 0; — barra fixada na base da tela

Sticky top responsivo

Diferente dos demais utilitários de position, .sticky-top é sempre responsivo: .sticky-top (sem breakpoint) ou .sticky-{breakpoint}-top (ex.: .sticky-md-top) fixam o elemento no topo do container de scroll a partir do breakpoint informado.

Breakpoints responsivos

A maioria dos utilitários abaixo aceita um infixo de breakpoint no meio do nome da classe: .{prefixo}-{breakpoint}-{valor} (ex.: .d-md-none, .text-lg-center, .gap-xl--lg). O breakpoint funciona mobile-first: a classe vale a partir da largura mínima indicada até o próximo breakpoint.

Breakpoint	Infixo	Largura mínima
Extra small	(nenhum, classe base)	0
Small	sm	576px
Medium	md	768px
Large	lg	992px
Extra large	xl	1200px
Extra extra extra large	xxxl	1920px

Visão ao vivo

Storybook mds-styles (HTML/CSS) — utilities-position ↗