🧭 position

Em um documento, especifica onde um elemento ficará.

Pode ser melhor ajustada com as propriedades top, right, bottom, left e z-index.

As medidas dessas propriedades seguem a seguinte lógica:

Elas são relativas à posição original do elemento.

Possíveis valores que position pode assumir:

• static: é o valor padrão. O elemento se encaixa no fluxo normal do documento. top, right, bottom, left e z-index não têm efeito algum.

  

• relative: o elemento se encaixa no fluxo normal do documento, mas as propriedades top, right, bottom, left e z-index podem ser usadas para mover o elemento de sua posição original. Mesmo que ele esteja deslocado, seu espaço original no documento é mantida.

  

• absolute: o elemento é removido do fluxo normal do documento e se torna relativo ao elemento pai (não necessariamente direto) mais próximo com a propriedade position especificada (com um valor não static). Caso não haja um elemento pai assim, ele ficará relativo ao contêiner inicial (viewport).

  • O espaço original ocupado pelo elemento não é mantido.
  • top, right, bottom, left e z-index podem ser usados para deslocar o elemento ainda mais.

  

• fixed: o elemento é removido do fluxo normal do documento e se torna relativo ao contêiner inicial (viewport). O espaço original ocupado pelo elemento não é mantido.

  • top, right, bottom, left e z-index podem ser usados para deslocar o elemento ainda mais.
  • Quando a página for rolada, o elemento permanecerá fixo.

  

📚 z-index

Especifica a elevação de um elemento relativamente a outros.