CSS no Lanche

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.