Marcus VBP

O posicionamento de elementos através de folhas de estilo é um tema complexo que causa muita confusão em desenvolvedores pouco experientes, além de que sua má implementação é responsável por causar redundância e complexidade desnecessária do CSS. Entenda-se como um elemento posicionado qualquer marcação HTML com a propriedade
position declarada com qualquer valor diferente de static.

O posicionamento de um elemento é formatado através da propriedade position e um dos seus quatro valores. Mas antes de explanar estes valores, é importante ter em mente as regras pelas quais funcionam o posicionamento:

1. Qualquer elemento HTML possui por padrão o valor static para a propriedade position, mesmo que esta propriedade não esteja declarada.
2. Um elemento é posicionado em qualquer local da área disponível no navegador em relação às margens da área do navegador ou em relação às margens do elemento pai que também for posicionado. A exceção desta regra é o valor relative, que é posicionado a partir do local original do elemento.
3. As propriedades de posicionamento left, right, top, left e z-index não se aplicam ao valor static. Right e bottom não se aplicam ao valor relative.

Tendo em mente as regras acima, os valores possíveis para a propriedade position são:

• static: é o valor padrão, aplicado a um elemento HTML mesmo que a propriedade não esteja declarada. Uma marcação formatada por este valor não é afetada por nenhuma outra propriedade de posicionamento (left, right, top, left ou z-index).
• relative: um elemento formatado com este valor pode ser posicionado através das propriedades left, top e z-index, tomando como ponto inicial o local onde o elemento estava posicionado inicialmente. Uma marcação com esta formatação ainda precisa seguir o fluxo normal do documento, e terá sua área ocupando espaço na página.
• absolute: um elemento formatado com este valor pode ser posicionado livremente através das propriedades left, right, top, left e z-index e é removido completamente do fluxo do documento, passando a ser um elemento flutuante (ou uma
• camada, se preferir) que sempre estará sobre os elementos sem posicionamento e também sobre elementos posicionados com a propriedade z-index com valor inferior ao seu próprio valor desta propriedade.
• fixed: tudo que foi dito sobre o valor absolute é verdade também para este valor. Mas uma marcação HTML com esta propriedade possui a característica de permanecer parada, parada na página, enquanto que os demais elementos fluem de acordo com a rolagem. Este recurso interessante mal é utilizado porque ele é completamente mal interpretado pelo navegador que possui a maior parte do mercado.

No projeto descrito aqui, foram utilizados basicamente a propriedade position com os valores relative e absolute. O valor absolute foi utilizado quem desejava-se posicionar um elemento sem que ele interferisse na posição de qualquer outro elemento da página. Um exemplo de elemento com este tipo de posicionamento é o logotipo do site, delimitado pelas marcações <h1></h1> e <a></a>.

O valor relative foi utilizado no projeto para facilitar e guiar o posicionamento de outros elementos posicionados. Um exemplo de elemento formatado com este valor é o rodapé, que contém outros elementos posicionados com o valor absolute.