Artigos HTML e CSS Como usar a propriedade Position - CSS
Olá pessoal, nesse artigo vou ensinar a usar a propriedade Position do CSS. Lembrando que essa é uma propriedade do CSS 2.1 e funciona perfeitamente em todos os navegadores (browsers) modernos.
Após entender a propriedade position tenha cuidado ao utilizar ela. O foco dessa propriedade é posicionar pequenos detalhes do layout, para diagramar o site utilize o bom e velho Float.
A propriedade position pode assumir 4 valores diferentes: Static, Relative, Absolute e Fixed. Segue abaixo a explicação para de cada uma:
Esse é o valor default de todo elemento HTML, ou seja, ele vai seguir o fluxo comum da sua página. Ex:
Listagem 1: Valor default.
Utilizando o position Relative o elemento passa a aceitar as propriedades Top, Bottom, Left e Right. Com elas você pode alterar o posicionamento do elemento. Ex:
Listagem 2: HTML.
<h1>Sou um h1</h1>
<h2>Sou um h2</h2>
Listagem 3: CSS.
Notem que o h1 se posicionou de acordo com o left e top enquanto o h2 manteve o posicionamento comum, ou seja, não atendeu as valores do left e top. Isso se deve porque elementos com position static (default) não podem ser posicionados.
Listagem 4: Breve explicação de elementos pai, filho e irmãos.
O elemento DIV é pai dos elementos H1, P e SPAN. Os elementos H1, P e SPAN são filhos do elemento DIV. Os elementos H1 e P são irmãos por estarem no mesmo nível. E o elemento SPAN é filho do elemento H1 e também do elemento DIV.
Continuando a explicação sobre o Position Absolute:
Tenham cuidado ao utilizar o positon absolute pois ele deixa de fazer parte do fluxo comum do documento e o espaço destinado a ele deixa de existir no documento. Ex:
Listagem 5: HTML.
Listagem 6: CSS.
div { background: #eee; margin: 50px;
h1 { position: absolute; top: 20px; left: 20px;
outline: 1px solid #444;  }
h2 { outline: 1px solid #f90; }
Notem que o elemento H2 assumiu o topo da DIV, respeitando o fluxo normal do documento, enquanto o h1 passou a se posicionar com uma distância de 20px do topo e 20px da esquerda, porém fora do fluxo, ficando por cima dos demais elementos.
Um detalhe importante é que você pode usar medidas negativas e posicionar os elementos em locais que antes seriam impossíveis de serem alcançados.
Listagem 7: HTML.
Listagem 8: CSS.
div { background: #eee; margin: 50px; width: 300px;
height: 300px; position: relative; }
h1 { position: absolute; top: -20px;
left: -20px; outline: 1px solid #444; background: #fff;
Resultado CSS Position Absolute.
O position fixed se comporta de maneira semelhante ao absolute, deixando de fazer parte do fluxo comum da página. Porém a grande diferença dele é que ele passa a se referenciar ao window do seu navegador, ou seja, a área que aparece para o usuário independente de barra de rolagem:.
Listagem 9: HTML.
Listagem 10: CSS.
div { background: #f90; width: 300px; height: 1500px; position: relative; }
h1 { position: fixed; top: 0; left: 20px; right: 20px;
outline: 1px solid #444; background: #fff;  }
h2 { position: fixed; bottom: 0; left: 20px; right: 20px;
outline: 1px solid #444; background: #fff;}
Notem como o elemento H2 se posicionou na parte inferior da página devido ao bottom: 0 e o H1 se pocionou no topo com o top:0. Reparem também que a página tem barra de rolagem vertical devido ao height da DIV mas mesmo assim o H2 respeitou o window.
As redes sociais e blog tem usado bastante esse recurso. O próprio Facebook mantém a barra superior fixa independente da navegação do usuário e os alertas do Twitter sempre aparecem no topo da página. Isso pode ser alcançado facilmente com a propriedade position utilizando o fixed.
Bom pessoal, espero que tenha ficado bem claro para vocês o poder da propriedade positon e novamente, tenham cuidado ao utiliza-la. Sempre optem pelo float para diagramação e position para pequenos ajustes.