• Design
  • Introdução ao CSS
  • CSS 2
  • Posição

CSS 2: Posição#

Agora que sabemos que a posição de um elemento influencia e é influenciada por outros elementos, podemos entrar em detalhes específicos.

Posicionamento estático#

Todos os elementos têm a propriedade

position: static;

por padrão. O posicionamento estático de um elemento coloca ele em seu lugar "natural", ou seja, o lugar que é uma consequência direta de:

  • display, tamanho, posição, margin e padding do pai;
  • display, tamanho, posição, margin e padding dos irmãos;
  • display, tamanho, margin e padding do próprio elemento;
  • ordem dos irmãos e ordem do próprio elemento em relação aos irmãos.

Ou seja, é o lugar em que o elemento fica "se você não fizer nada de especial."

Posicionamento relativo#

Se um elemento tem a propriedade

position: relative;

você pode usar as propriedades top, left, bottom, right para fazer um deslocamento desse elemento relativo ao seu posicionamento estático.

Exercise 1

Descomente as linhas do código CSS abaixo.

Codepen-embed

CodePen

Essas linhas que estavam comentadas significam "deslocar 10px a partir de cima (ou seja, para baixo) e deslocar 10px a partir da esquerda (ou seja, para direita)".

Como essas propriedades representam deslocamentos, geralmente não faz sentido usar top e bottom simultaneamente ou usar left e right simultaneamente.

Repare que os outros elementos se comportam como se o posicionamento fosse estático.

Após descomentar o código, o que aconteceu com o texto "veniam", que vem logo depois do "minim" em amarelo?

Answer

Deveria ser possível responder a esta pergunta apenas lendo o handout, mas é interessante visualizar as modificações no CodePen para ganhar experiência.

Posicionamento fixo#

Se um elemento tem a propriedade

position: fixed;

você pode usar as propriedades top, left, bottom, right para fazer um deslocamento desse elemento a partir do canto superior esquerdo do navegador.

Exercise 2

No exemplo abaixo, mova a barra de rolagem da aba Result e veja o que acontece com a caixinha preta.

Codepen-embed

CodePen

O que acontece com o header ("Estou flutuando!") com position: fixed; se você der um scroll para baixo (descer na página)?

Answer

Repare que os outros elementos se comportam como se essa caixinha preta não existisse. É como se ela flutuasse e não fizesse parte do documento.

Posicionamento absoluto#

Se um elemento tem a propriedade

position: absolute;

você pode usar as propriedades top, left, bottom, right para fazer um deslocamento desse elemento a partir do canto superior esquerdo do seu antepassado não-estático mais próximo.

Ok, isso exige uma explicação mais detalhada:

  • primeiramente, por "antepassado" queremos dizer qualquer elemento "em volta", ou seja, o pai, o avô, o bisavô...;
  • em seguida, por "antepassado não-estático" queremos dizer um antepassado cujo posicionamento não seja estático, ou seja, um antepassado cujo valor de position seja relative, fixed ou também absolute;
  • por fim, por "antepassado não-estático mais próximo", queremos dizer o primeiro antepassado "de dentro para fora" (pai é mais próximo que avô, avô é mais próximo que bisavô...) cujo posicionamento não seja estático.

Exercise 3

Tente entender o exemplo abaixo com calma. Experimente mudar a linha position: relative de lugar.

Codepen-embed

CodePen

O que acontece com o header ("Estou flutuando!") se modificarmos o estilo da classe pai no exemplo acima para:

.pai {
    position: relative;
    background-color: blue;
}

Answer

Repare que os outros elementos se comportam como se essa caixinha preta não existisse. É como se ela flutuasse e não fizesse parte do documento.