Posicionamento

Os possíveis métodos de posicionamento são: estático, fixo, relativo e absoluto. Esses métodos definem como cada elemento se posiciona na tela em relação aos outros elementos. Assim, todo elemento HTML usa alguma forma de se posicionar.Veja a definição de cada método a seguir

• Estático (static) – esse valor determina que o elemento não deve ser afetado pelas propriedades top, bottom, left e right, ou seja, eles aparecem um abaixo do outro, na ordem em que são escritos no documento (X)HTML, e nenhum elemento sobrescreve outro. Por default, todos os elementos (X)HTML são estáticos, ou seja, se você não definir nenhuma forma de posicionamento para um certo elemento, então, a propriedade position dele tem valor static.
• Fixo (fixed) – esse valor determina que o elemento seja posicionado em um lugar fixo na janela de tal forma que, mesmo que a janela seja rolada para cima-baixo ou esquerda-direita, aquele elemento continuará sendo visível no mesmo lugar. Dessa forma, elementos fixos podem sobrepor outros elementos e fazem com que os outros elementos se comportem como se ele não existisse.
• Relativo (relative) – esse valor determina que o elemento seja posicionado (mais para cima, baixo, esquerda ou direita) em relação à posição que ele ocupa no fluxo normal do (X)HTML. Dessa forma, o elemento pode ser empurrado para cima/baixo, esquerda/direita e sobrepor outros elementos, mas o espaço reservado para ele é preservado no fluxo normal descrito no (X)HTML.
• Absoluto (absolute) – esse valor determina que o elemento seja posicionado em relação ao seu elemento pai que tenha posição diferente de estática. Se não houver elemento pai com essa característica, então, o pai será o elemento e, então, o elemento será posicionado tomando como referência o topo esquerdo do browser. Esse método faz com que os outros elementos se comportem como se ele não existisse, ou seja, com que eles não respeitem o fluxo no qual eles foram descritos no documento HTML, podendo sobrepô-los

Para você entender melhor, veja a Figura 9.Nela há 4 parágrafos posicionados segundo cada um dos métodos descritos acima: o parágrafo 1 usa o método fixed, o parágrafo 2 usa o método static, o parágrafo 3 utiliza o método absolute e o parágrafo 4 usa o método relative.

Observando o HTML, você verá que o parágrafo 1 é escrito antes do parágrafo 2, no entanto, na Figura 9, o parágrafo 1 está à direita do parágrafo 2, um ao lado do outro. Isso ocorre porque eles usam, respectivamente, as propriedades right e left e porque o método fixed faz com que outros elementos se comportem como se ele não existisse.

Observe, também, que os parágrafos 3 e 4 estão sobrepostos. Isso ocorre porque o método absolute, usado no parágrafo 3, faz com que outros elementos (que permitem sobreposição) ignorem-no. Outro detalhe a ser observado é que os parágrafos 3 e 4 aparecem abaixo do parágrafo 2 porque os métodos absolute e relative respeitam o fluxo descrito no documento (X)HTML. Rolando a página para baixo e para cima, você poderá perceber que o parágrafo 1, definido com o método fixed, não rola, ele fica fixo e é sobreposto pelo parágrafo 4 que estava abaixo.

See the Pen autoria_web_7f9_posicionamento by Materiais (@materiais) on CodePen.

Como você viu, ao usar os métodos de posicionamento, é possível que alguns elementos sobreponham outros. Assim, como definir o elemento que ficará por cima e qual ficará por baixo?