O posicionamento CSS permite controlar exatamente onde os elementos aparecem dentro de uma página Web.
Com a propriedade position podemos criar menus, banners, elementos fixos e layouts profissionais.
A propriedade position define o método de posicionamento de um elemento.
.elemento {
position:valor;
}
| Valor | Descrição |
|---|---|
| static | Posicionamento padrão. |
| relative | Relativo à posição original. |
| absolute | Posição absoluta dentro do elemento pai. |
| fixed | Fixo na tela. |
| sticky | Fica preso durante rolagem. |
É o valor padrão de todos os elementos HTML.
div {
position:static;
}
As propriedades top, left, right e bottom não funcionam.
Mantém o espaço original, mas permite deslocamento.
.caixa {
position:relative;
top:20px;
left:30px;
}
| Propriedade | Movimento |
|---|---|
| top | Move para baixo. |
| bottom | Move para cima. |
| left | Move para direita. |
| right | Move para esquerda. |
Remove o elemento do fluxo normal da página.
.caixa {
position:absolute;
top:0;
right:0;
}
Muito usado em elementos sobrepostos.
Normalmente usamos relative no elemento pai.
.container {
position:relative;
}
.filho {
position:absolute;
top:10px;
}
O elemento fica preso na tela mesmo durante a rolagem.
.menu {
position:fixed;
top:0;
}
Exemplos: menus fixos e botões flutuantes.
Mistura comportamento relativo e fixo.
header {
position:sticky;
top:0;
}
Muito utilizado em cabeçalhos.
Controla qual elemento aparece na frente.
.caixa {
z-index:10;
}
Quanto maior o valor, maior a prioridade.
nav {
position:fixed;
top:0;
width:100%;
}
.botao {
position:fixed;
right:20px;
bottom:20px;
}
.banner {
position:relative;
}
.texto {
position:absolute;
top:50%;
left:50%;
}
| Tipo | Uso |
|---|---|
| static | Padrão HTML. |
| relative | Ajustes pequenos. |
| absolute | Sobreposição. |
| fixed | Elemento preso na tela. |
| sticky | Cabeçalhos fixos. |
| Erro | Problema |
|---|---|
| Usar absolute em tudo | Layout quebrado. |
| Ignorar responsividade | Problemas no celular. |
| Z-index incorreto | Elementos escondidos. |
| Propriedade | Função |
|---|---|
| position | Define posicionamento. |
| top/left/right/bottom | Move elementos. |
| z-index | Controla camadas. |