Entenda como funciona a propriedade position do css

É imprescindível dominar a propriedade position do css pra quem quer montar Layouts mais profissionais, ou até para conseguir alguns efeitos bacanas com jquery .
Vamos entender como funcionam cada uma delas, que são static, relative, absolute e fixed:

CSS Position Static:

.classe{position:static;}

Essa é a propriedade padrão, não é necessário declará-la, a menos que você queira sobre-escrever um estilo para a classe que ja contenha outro tipo de position. Ou seja, todos os elementos tem este tipo de position setado por padrão. Ele não muda em nada o comportamento padrão do elemento.

CSS Position Relative:

.classe{position:relative;}

Essa é a propriedade que deixa o posicionamento do elemento relativo como o próprio nome diz, mas qual é a sacada disso? Com essa e as outras propriedades position, que não a estática, são inseridas mais 4 propriedades css, que são: top, right, bottom e right. Os nomes já são auto explicativos: topo, direita, baixo e esquerda. Ou seja, se o elemento tiver position relative, eu posso manipular a distância deste objeto, relativamente a posição que ele teria inicialmente, utilizando essas 4 propriedades. As propriedades top, left, right e bottom são SEMPRE relativas a posição que este elemento ocuparia originalmente. A partir deste tipo de posicionamento, também pode ser usada a propriedade z-index, que diz qual a altura de um elemento com relação ao outro, quando elementos se sobrepõem. Imagine que eu use position:relative em uma div, e um top negativo, essa div ficaria por cima da outra. Pra definir quem deve “aparecer por cima” é utilizada a propriedade z-index. Quanto maior o número, mais alto ela irá aparecer sobre as outras. Obs: As propriedades top, left, right, bottom e z-index não funcionam com o posicionamento padrão, que é o static.

Exemplo: Estas duas divs abaixo estão com posicionamento estático, que é o comportamento padrão:

Agora utilizando o position relative:

Pra você pode não ter mudado muita coisa, ja que é possível o mesmo efeito em um div estática, utilizando margin-top e margin-left. Mas você não conseguiria controlar quem “deve aparecer por cima”, que é a função da propriedade z-index:

Para mudar essa regra, utilizamos o z-index:

CSS Position Absolute:

.classe{position:absolute;}

Essa é umas das propriedades mais bacanas para “viajar” no layout. Ao declarar position absolute em um elemento, eu também posso usar as propriedade top, left, right, bottom e z-index, assim como na posição relativa, a diferença é que este elemento tem uma posição absoluta a partir do topo/esquerda da página, ou seja, a partir do body. Mas isso é um problema, já que se eu declarar posição absoluta e left 10px por exemplo, a resolução do monitor mudaria este elemento com relação ao resto da página dependendo da resolução. Veja (clique nas fotos para visualizar melhor):

Viu como ficaram diferentes dependendo da resolução? por que a posição é absoluta em relação ao topo esquerdo da tela, que pode ser diferente dependendo da resolução. O que fazer então? A especificação é que todo elemento com posição absoluta, terá como referência o topo esquerdo da tela, ou o seu parente mais próximo que tenha posição definida e diferente de static. Ou seja, basta colocar o elemento com posição absoluta, dentro de um que tenha posição relativa! Assim ele tem uma posição absoluta, tomando como referência o topo esquerdo deste elemento e não da página.

A posição absoluta é aquilo que você precisa, quando necessita sobrepor elementos, já que a posição absoluta não ocupa espaço na página! Se você criar uma div com posição relative, e colocar dentro dela apenas outra com position absolute, essa div “pai” não terá largura e nem altura, já que elementos com position absolute não ocupam espaço na página, sendo assim, seu elemento “pai” estará vazio. para resolver este problema(caso haja problema no seu layout por conta disso) basta definir largura e altura para o elemento “pai”.
Vamos ver um exemplo de posição absoluta, colocando um texto por cima de uma imagem, muito usado como caption em alguns sites:

Div por cima de imagem com position absolute
Div por cima de imagem com position absolute
Div por cima de imagem com position absolute

CSS Position Fixed:

Por fim a posição fixa. Ela tem comportamento semelhante a posição absoluta, a única diferença é que o elemento fica fixo na tela, mesmo rolando a página. Isso é muito utilizado em sites que tem uma header fixa, que continua mesmo quando você rola a página. Clique aqui para visualizar um exemplo e role a página para ver o efeito

o código utilizado para este efeito foi este:

$(document).ready(function(){
	$('a.example_fixed').click(function(){
		$('body').prepend('<div class="exemplo_fixo">DIV com um cabeçalho fixo.<br />Role a página pra ver como ela se comporta com posição fixa<a class="close_fixed">Fechar</a></div>');
		$('.exemplo_fixo').show(800);
		$('.exemplo_fixo a.close_fixed').click(function(){
			$('.exemplo_fixo').hide(800);
			$('.exemplo_fixo').remove();
		})
	})
})

.exemplo_fixo{position:fixed; z-index:99999; top:0px; background:#000; border:1px dashed #fff; width:100%; text-align:center; padding:40px 0px 40px 0px; color:#fff; font-size:24px;}
.exemplo_fixo .close_fixed{position:absolute; top:10px; right:10px; color:#fff;}

Este conteúdo é um pouco extenso, e você só vai entender bem mesmo colocando em prática. Então vamos lá! mãos a massa!

www.simplesharebuttons.comCompartilhe este conteúdo nas mídias sociais!