Diferença entre position: static, relative, absolute e fixed

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.
view plaincopy to clipboardprint?

1.
#div1 {position: static}

#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.
view plaincopy to clipboardprint?

1.
#div1 {
2.
position: relative;
3.
top: 40px;
4.
left: 20px;
5.
}

#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.
view plaincopy to clipboardprint?

1.
#div1 {
2.
position: absolute;
3.
top: 40px;
4.
right:0;
5.
}

#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:
view plaincopy to clipboardprint?

1.
<div id=”div1″>
2.
<div id=”div2″></div>
3.
</div>

<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

view plaincopy to clipboardprint?

1.
#div1 {
2.
position: fixed;
3.
top:40px;
4.
left:10px;
5.
}

#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

Fonte

Anúncios

Deixe um comentário

Arquivado em CSS . Cascading Style Sheets

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s