Posição elementos

Podemos colocar um elemento numa posição exacta na página. Combinando com floats, o posicionamento abre muitas possibilidades para criação de layouts precisos e avançados.

Princípio de posicionamento CSS
Posicionamento absoluto
Posicionamento relativo

Princípio de posicionamento com CSS

Considere-se a janela do navegador como um sistema de coordenadas:

Posição CSS coordenadas do browser

O princípio de posicionamento CSS estabelece que pode posicionar um elemento em qualquer lugar no ecrân usando um sistema de coordenadas.

Vamos supor que queremos posicionar um cabeçalho. Usando a box model o cabeçalho pode ser estilizado para ser apresentado como mostrado abaixo:

exemplo de posicionamento CSS

Cabeçalho numa box

Se quisermos o cabeçalho posicionado a 100px do topo do documento e a 200px à esquerda, podemos usar o seguinte CSS:

h1 {
   position:absolute;
   top: 100px;
   left: 200px;
}

O resultado é:

Como se pode ver, posicionar usando o CSS é uma técnica precisa para colocar elementos. É muito mais eficaz do que usar tabelas, imagens transparentes, por exemplo.

Posicionamento absoluto

Um elemento posicionado absolutamente não cria nenhum espaço no documento. Isto significa que não deixa nenhum espaço vazio após ser posicionado.

Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Pode-se posteriormente usar as propriedades left, right, top, e bottom para definir as coordenadas e posicionar o elemento.

Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos da página:

#box1 {
   position:absolute;
   top: 50px;
   left: 50px;
}

#box2 {
   position:absolute;
   top: 50px;
   right: 50px;
}

#box3 {

   position:absolute;
   bottom: 50px;
   right: 50px;
}

#box4 {
   position:absolute;
   bottom: 50px;
   left: 50px;
}

Posicionamento relativo

Para posicionar um elemento de forma relativa a propriedade position deve ser definida para relative. A diferença entre os dois tipos de posicionamento é a maneira como o posicionamento é calculado.

O posicionamento para posição relativa é calculado com base na posição original do elemento no documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para cima ou para baixo.

Como exemplo de posicionamento relativo vamos tentar posicionar três imagens relativamente ás suas posições originais na página. Note-se como as imagens deixam um espaço vazio nas suas posições originais no documento:

#dog1 {
   position:relative;
   left: 350px;
   bottom: 150px;
}
#dog2 {
   position:relative;
   left: 150px;
   bottom: 500px;
}

#dog3 {
   position:relative;
   left: 50px;
   bottom: 700px;
}