Neste tutorial vamos aprender a diferença entre position: static, relative, absolute e fixed no CSS.
position: static
Esse é o valor default para todo elemento HTML, o que significa que o elemento não tem posicionamento definido e seu fluxo ocorre normalmente no documento HTML.
#div1 {position: static}
Não é necessário definir position:static para os elementos da página pois esse é o valor default.
position: relative
Especificando position:relative agora você pode utilizar top ou bottom, right ou left para posicionar os elementos na página em relação ao lugar que ele ocuparia no fluxo do documento.
#div1 {
position: relative;
top: 40px;
left: 20px;
}
Nesse exemplo posicionamos o elemento a 40px do topo e a 20px da esquerda em relação ao lugar que ele ocuparia no fluxo do documento. Vale lembrar que utilizando position:relative todo esse espaço que foi definido ainda continua sendo ocupado pelo elemento na página. Exemplo.
position: absolute
Utilizando position: absolute agora podemos posicionar exatamente nosso elemento em relação ao primeiro elemento pai com posição diferente de “static” numa sequência até parar no body.
#div1 {
position: absolute;
top: 40px;
right:0;
}
Vale lembrar que a patir do momento que utilizamos position: absolute ele perde a ordem no fluxo do documento e o espaço ocupado passa a não existir mais. Exemplo.
position:relative + position: absolute
Observem o seguinte código HTML:
<div id="div1">
<div id="div2"></div>
</div>
Se definirmos position: relative para a div1 e position: absolute para a div2 a partir de agora a div2 se posicionará absolutamente em relação a div1, não mais em ralação ao body da página. Exemplo.
position: fixed
#div1 {
position: fixed;
top:40px;
left:10px;
}
Posiciona um elemento fixadamente na página em relação a janela, ou seja, independente de a pagina conter um scroll ou não, o elemento sempre ficará visíve ao usuário em relação as medidas definidas. Vale lembrar que esse tipo de posicionamento não funciona no Internet Explorer. Exemplo.
