Como usar a propriedade position no CSS para alinhar elementos

Posicionar elementos no desenvolvimento da Web não é tão fácil quanto parece. As coisas podem ficar complicadas à medida que mais elementos chegam à página.

Portanto, é essencial saber usar CSS para alinhar elementos. Também economizará nosso tempo enquanto codificamos.

Existem diferentes maneiras / métodos para posicionar elementos. Usar o Bootstrap é uma boa maneira, por exemplo, mas nem todos os projetos usam o Bootstrap. Então, vou explicar uma das formas de alinhar elementos com CSS puro: a propriedade de posição.

Posição CSS & Propriedades Auxiliares

Existem 5 valores principais de Posições CSS:
position: static | relative | absolute | fixed | sticky

e as propriedades para definir as coordenadas de um elemento (são chamadas de "propriedades auxiliares"):

top | right | bottom | left | z-index
Nota: As propriedades auxiliares não funcionam sem uma posição declarada ou com position: static.

 O que é z-index?

Nós temos altura e largura (x, y) como 2 dimensões. Z é a terceira dimensão. Um elemento vem na frente de outros elementos à medida que seu valor de z-index aumenta. O z-index também não funciona com position: static ou sem posição declarada.

z-index

Agora vamos explicar os valores da posição CSS: em detalhes.

1. Static

position: static é o valor padrão. Independentemente de declararmos ou não, os elementos são posicionados em ordem normal na página da Web. Vamos dar um exemplo:

Primeiro, definimos uma estrutura HTML:

<body>
      <div class="div-vermelha"></div>
      <div class="div-amarela"></div>
</body>

Então, foi criado 2 divs e agora temos que definir suas posições:

.div-vermelha {  // sem qualquer declaração de posição
     background: #ff0000;
     height: 100px;
     width: 100px;
}

.div-amarela {
     background: #fab700;
     height: 100px;
     width: 100px;
     position: static;   // Declarado como static
}

 Posição static
mesmo resultado com e sem position: static

Div são elementos de bloco por padrão, e é por isso que eles não estão na mesma linha.

2. Relative

position: relative é a nova posição de um elemento em relação à sua posição normal.

Começando pela posição: relative e para todos os valores de posição não static, podemos alterar a posição padrão de um elemento. Mas somente definindo position: relative não é suficiente, também precisamos definir as coordenadas do elemento com as propriedades auxiliares.

 Vamos mover a div vermelha para o lado da amarela.

.div-vermelha {
     position: relative;  // Agora podemos mover o elemento
     background: #ff0000;
     width: 100px;
     height: 100px;
     top: 100px;  // 100px do topo em relação à sua posição antiga
     left: 100px;  // 100px da esquerda
}

 Posição relative
A div vermelha é movida 100px para baixo e para a direita, em relação à sua posição normal

Nota: O uso de position: relative para um elemento, não afeta as posições de outros elementos.

3. Absolute

 Na position: relative, o elemento é posicionado em relação a si mesmo. No entanto, um elemento posicionado como absolute é relativo ao seu pai.

Um elemento com position: absolute é removido do fluxo normal de documentos. Ele é posicionado automaticamente no ponto inicial (canto superior esquerdo) de seu elemento pai. Se não houver elementos pai, o documento inicial <html> será seu pai.

Como position: absolute remove o elemento do fluxo de documentos, outros elementos são afetados e se comportam conforme o elemento é removido completamente da página da Web.

Vamos adicionar um container como elemento pai:

<body>
      <div class="container">
            <div class="div-vermela"></div>
           <div class="div-amarela"></div>
     </div>
</body>

Altere seu valor de posição para absolute:

.div-vermelha {
     position: absolute;
     background: #ff0000;
     width: 100px;
     height: 100px;
}

Position absolute
position: absolute leva o elemento para o começo de seu pai

Agora parece que a div amarela desapareceu, mas não, o que ocorreu é que a div vermelha se posicionou em cima da div amarela.

Vamos mover a div vermelha em 5 pixels:

.div-vermelha {
     position: absolute;
     background: #ff0000;
     width: 100px;
     height: 100px;
     left: 5px;
     top: 5px;
}

 Position Absolute
Agora podemos ver a div amarela

As coordenadas de um elemento posicionado em absolute são relativas a seu pai, se o pai também tiver uma posição não static. Caso contrário, as propriedades auxiliares posicionam o elemento em relação ao <html> inicial.

 

.container {
     position: relative;
     background: #c6c6c6;
}
.div-vermelha {
     position: absolute;
     background: #ff0000;
     width: 100px;
     height: 100px;
     right: 5px; // 5px em relação ao mais certo dos pais
}

 

4. Fixed

Como position: absolute, elementos fixed posicionados também são removidos do fluxo normal de documentos. As diferenças são:

  • Eles são apenas relativos ao documento <html>, não a qualquer outro pai.
  • Eles não são afetados pela rolagem da página.

Aqui no exemplo, altero a posição da div vermelha para fixed e, dessa vez, ela é relativa a 5px à direita do <html>, não a seu pai (container).

See the Pen gQQbMq by Portal do Site (@portaldosite) on CodePen.

Como podemos ver, a rolagem da página não afeta a div posicionada com fixed. Não é mais relativo a seu pai (container).

5. Sticky

position: sticky pode ser explicada como uma mistura de position: relative e position: fixed.

Comporta-se até um ponto declarado como position: relative, depois disso muda seu comportamento para position: fixed. A melhor maneira de explicar a position: sticky é por um exemplo:

See the Pen wQQWqx by Portal do Site (@portaldosite) on CodePen.

Importante! A posição Sticky não é suportada no Internet Explorer e versões anteriores do Edge.

A melhor maneira de entender o Posicionamento CSS é por prática. Continue codificando até que você tenha uma melhor compreensão.