A propriedade position define como um elemento é posicionado no documento. Ela funciona em conjunto
com as propriedades top, right, bottom e left.
Este é o valor padrão. O elemento segue o fluxo normal da página. As propriedades top,
right, bottom e left não têm efeito.
Este elemento está no fluxo normal.
O elemento é posicionado em relação à sua posição normal. Ele ainda ocupa seu espaço original no fluxo do documento, mas pode ser deslocado visualmente.
.elemento-relativo {
position: relative;
top: 20px;
left: 20px;
}O espaço original da caixa vermelha ainda está reservado.
O elemento é removido do fluxo normal e posicionado em relação ao seu ancestral posicionado mais próximo
(qualquer um que não seja static). Se não houver, ele se posiciona em relação ao
<body>.
.container {
position: relative; /* Contexto de posicionamento */
}
.elemento-absoluto {
position: absolute;
top: 10px;
right: 10px;
}O elemento é removido do fluxo normal e posicionado em relação à janela do navegador (viewport). Ele não se move quando a página é rolada. (Veja o quadrado verde no canto inferior direito da sua tela).
.elemento-fixo {
position: fixed;
bottom: 20px;
right: 20px;
}Este elemento fica fixo na tela, mesmo com a rolagem.
É um híbrido de relative e fixed. O elemento se comporta como relative até
atingir um ponto específico na tela (definido por top, bottom, etc.), a partir do qual
ele se torna fixed.
.elemento-pegajoso {
position: sticky;
top: 0;
}Role a página para baixo. Este elemento "grudará" no topo quando for alcançado.
A propriedade z-index controla a ordem de sobreposição de elementos posicionados (qualquer um que
não seja static). Um elemento com z-index maior ficará na frente de um com
z-index menor.
.caixa1 { z-index: 1; }
.caixa2 { z-index: 2; } /* Ficará na frente */
.caixa3 { z-index: 1; }