A propriedade CSS position controla como um elemento é posicionado no layout do documento. Existem cinco valores — cada um serve necessidades de layout distintas.
| Valor | Comportamento | Ponto de Referência | No Fluxo? | Usos Comuns |
|---|---|---|---|---|
static (padrão) | Fluxo normal do documento | N/A | Sim | Linha de base; reseta posicionamento herdado |
relative | Deslocado da posição normal | Ele mesmo | Sim (espaço reservado) | Pequenos ajustes; criar contexto de posicionamento para filhos absolute |
absolute | Removido do fluxo; posicionado | Ancestral posicionado mais próximo | Não | Tooltips, dropdowns, modais, badges, overlays |
fixed | Removido do fluxo; relativo ao viewport | Viewport | Não | Barras de navegação, sidebars, widgets de chat, banners de cookies |
sticky | Relativo até limite de scroll, depois fixed | Viewport (quando fixo) | Sim (até fixar) | Cabeçalhos de secção, botões "voltar ao topo", filtros persistentes |
relative, absolute, fixed, sticky num ancestral cria um bloco contenedor para descendentes absolute.top, right, bottom, left só funcionam em elementos não-static.sticky requer um limite (ex: top: 0) e um ancestral com scroll e altura definida./* Menu dropdown */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; } /* Cabeçalho de secção sticky */ .section-header { position: sticky; top: 0; background: white; z-index: 10; } /* Navbar fixed */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } Escolha o valor menos disruptivo que atinja o seu objetivo de layout — padrão para static/relative; use absolute/fixed/sticky apenas quando necessário.
Tecnologia Eletrônica © [www.351231.com]