Embedded Files
Propriedade position no CSS: como posicionar elementos
Propriedade position no CSS: como posicionar elementos
A propriedade position define como um elemento é posicionado dentro de uma página web. Por padrão, todos os elementos HTML têm position: static. Mas, para alterar a posição de um elemento, podemos escolher entre cinco valores: static, relative, absolute, fixed e sticky.
1. static (estático)
Descrição: É o posicionamento padrão de todos os elementos.
Comportamento: O elemento aparece normalmente no fluxo da página, alinhado ao canto superior esquerdo, seguindo a ordem em que foi escrito no HTML.
Observação: Não funciona com as propriedades auxiliares top, bottom, left ou right.
Exemplo:
div {
position: static;
}
2. relative (relativo)
Descrição: Permite mover o elemento em relação à sua posição original.
Comportamento: Ao usar top, bottom, left ou right, o elemento se desloca sem sair do fluxo da página.
Exemplo:
div {
position: relative;
top: 50px; /* move 50px para baixo */
left: 50px; /* move 50px para a direita */
}
3. absolute (absoluto)
Descrição: O elemento é posicionado em relação ao seu elemento pai mais próximo que tenha position diferente de static. Se não houver, ele será posicionado em relação ao canto superior esquerdo do documento.
Comportamento: Pode sobrepor outros elementos.
Exemplo:
div {
position: absolute;
top: 20px;
left: 30px;
}
4. fixed (fixo)
Descrição: O elemento fica fixo na tela, mesmo quando a página é rolada.
Exemplo:
header {
position: fixed;
top: 0;
width: 100%;
}
5. sticky (pegajoso)
Descrição: Combina comportamentos de relative e fixed. O elemento se comporta como relativo até que atinja um ponto específico de rolagem, então "gruda" na tela.
Exemplo:
nav {
position: sticky;
top: 0; /* fica fixo no topo ao rolar a página */
}
Propriedades auxiliares do position
Propriedades auxiliares do position
top: distancia do topo do elemento pai ou da tela.
bottom: distancia do rodapé.
left: distancia da borda esquerda.
right: distancia da borda direita.
z-index: controla a sobreposição dos elementos. Valores maiores ficam à frente. Funciona com relative, absolute e sticky.
Exemplo de sobreposição:
div1 {
position: absolute;
z-index: 1; /* fica atrás */
}
div2 {
position: absolute;
z-index: 2; /* fica na frente */
}
Resumo das Posições de Referência:
Para clareza, aqui estão os principais tipos de posicionamento e a quem eles são relativos:
relative - A sua própria posição original.
absolute - Ao primeiro elemento pai posicionado (que não seja static). Se não houver pai posicionado, é o documento (<html> ou <body>).
fixed - A janela de visualização (viewport) do navegador.
sticky - É relativo ao elemento ancestral mais próximo que tem um contêiner de rolagem.
Google Sites
Report abuse