Propriedade position: static, relative, absolute, fixed e sticky

Até agora, você aprendeu que os elementos HTML são dispostos na página de acordo com o fluxo normal do documento, seja como blocos empilhados ou elementos inline lado a lado. A propriedade position no CSS nos dá um controle muito maior sobre onde um elemento aparece na tela, permitindo que o tiremos desse fluxo normal ou o ajustemos dentro dele.

Dominar a propriedade position é crucial para criar layouts complexos, sobrepor elementos, fixar barras de navegação e muito mais.

Pense na propriedade position como a "regra de posicionamento" de um objeto em uma sala.

static é como um móvel que fica onde foi colocado naturalmente.
relative é como um mó quadro que você move um pouco da sua posição original na parede.
absolute é como um quadro que você tira da parede e coloca em qualquer lugar da sala, mas sua posição é definida em relação a uma parede específica.
fixed é como um adesivo que você cola na janela, ele sempre fica no mesmo lugar, não importa para onde você olhe.
sticky é como um ímã que fica na geladeira, mas se você a abrir, ele se move com a porta até um certo ponto.

Os Cinco Valores da Propriedade `position`

1. `position: static` (Padrão)

Comportamento: Este é o valor padrão para todos os elementos HTML. O elemento é posicionado de acordo com o fluxo normal do documento.
Propriedades de Offset: As propriedades top, right, bottom, left e z-index não têm efeito em elementos com position: static.
Uso: Para a maioria dos elementos que seguem o fluxo natural da página.

2. `position: relative`

Comportamento: O elemento é posicionado de acordo com o fluxo normal do documento, mas pode ser deslocado de sua posição original usando as propriedades top, right, bottom, left.
Espaço Ocupado: Mesmo quando deslocado, o elemento continua ocupando seu espaço original no fluxo do documento. Outros elementos não se movem para preencher o espaço vazio.
Contexto de Posicionamento: Um elemento com position: relative cria um contexto de posicionamento para seus filhos com position: absolute. Isso é muito importante!
Uso: Para pequenos ajustes de posição de um elemento, ou mais comumente, como um contêiner para elementos posicionados absolutamente.

3. `position: absolute`

Comportamento: O elemento é removido completamente do fluxo normal do documento. Ele não ocupa espaço e outros elementos se comportam como se ele não existisse.
Posicionamento: É posicionado em relação ao seu ancestral posicionado mais próximo (ou seja, o ancestral que tem position: relative, absolute, fixed ou sticky). Se não houver nenhum ancestral posicionado, ele será posicionado em relação ao <body> do documento.
Propriedades de Offset: As propriedades top, right, bottom, left são usadas para definir sua posição exata.
Uso: Para criar pop-ups, tooltips, menus dropdown, sobreposições, ou para posicionar elementos de forma precisa dentro de um contêiner específico.

4. `position: fixed`

Comportamento: O elemento é removido completamente do fluxo normal do documento. Ele não ocupa espaço.
Posicionamento: É posicionado em relação à viewport (janela do navegador). Sua posição é fixa e não muda mesmo quando a página é rolada.
Propriedades de Offset: As propriedades top, right, bottom, left são usadas para definir sua posição exata na viewport.
Uso: Para criar barras de navegação fixas (headers), footers fixos, botões "voltar ao topo" ou elementos que devem permanecer visíveis independentemente da rolagem.

5. `position: sticky`

Comportamento: É um híbrido de relative e fixed. O elemento se comporta como relative dentro do seu contêiner até que ele atinja um determinado ponto de rolagem na viewport. A partir desse ponto, ele se comporta como fixed.
Espaço Ocupado: O elemento continua ocupando seu espaço original no fluxo do documento enquanto não está "grudado".
Propriedades de Offset: Requer pelo menos uma das propriedades top, right, bottom, left para funcionar, que define o "limite" para quando ele deve se tornar fixed.
Uso: Para criar barras de navegação que se tornam fixas ao rolar, títulos de seção que "grudam" no topo da tela, ou sidebars que permanecem visíveis enquanto o usuário rola o conteúdo principal.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedade Position</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding-top: 80px; /* Espaço para o header fixo */
      padding-bottom: 80px; /* Espaço para o footer fixo */
      height: 2000px; /* Para ter barra de rolagem */
      background-color: #f4f4f4;
    }

    .header-fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: #007bff;
      color: white;
      text-align: center;
      line-height: 60px;
      z-index: 1000; /* Para ficar acima de outros elementos */
    }

    .footer-fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: #333;
      color: white;
      text-align: center;
      line-height: 60px;
      z-index: 1000;
    }

    .container {
      width: 80%;
      margin: 20px auto;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 20px;
      position: relative; /* Importante para o absolute-box */
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      border: 1px solid blue;
      text-align: center;
      line-height: 100px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
    }

    .static-box {
      /* position: static; (padrão, não precisa declarar) */
      background-color: lightgray;
    }

    .relative-box {
      position: relative;
      top: 20px;
      left: 20px;
      background-color: lightgreen;
    }

    .absolute-box {
      position: absolute;
      top: 50px;
      right: 50px;
      background-color: lightcoral;
      z-index: 10; /* Para ficar acima de outros elementos */
    }

    .sticky-box {
      position: sticky;
      top: 70px; /* Gruda 70px do topo da viewport */
      width: 150px;
      height: 50px;
      background-color: lightgoldenrodyellow;
      border: 2px solid orange;
      text-align: center;
      line-height: 50px;
      margin-left: 50px;
      z-index: 50;
    }

    p {
      margin-bottom: 15px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <header class="header-fixed">Barra de Navegação Fixa (`position: fixed`)</header>

  <div class="container">
    <h2>`position: static` (Padrão)</h2>
    <div class="box static-box">Static Box</div>
    <p>Este é um parágrafo que segue o fluxo normal do documento. O Static Box está posicionado naturalmente.</p>

    <h2>`position: relative`</h2>
    <div class="box relative-box">Relative Box</div>
    <p>Este parágrafo está abaixo do espaço original do Relative Box. Note que o Relative Box foi deslocado, mas seu espaço original ainda é ocupado.</p>

    <h2>`position: absolute`</h2>
    <p>O Absolute Box está posicionado em relação ao seu contêiner pai (`.container`), que tem `position: relative`. Ele não ocupa espaço no fluxo do documento.</p>
    <div class="box absolute-box">Absolute Box</div>
    <p>Este parágrafo está abaixo do espaço original onde o Absolute Box *estaria* se não fosse absoluto.</p>

    <h2>`position: sticky`</h2>
    <p>Role a página para baixo para ver o Sticky Box grudar no topo.</p>
    <div class="sticky-box">Sticky Box</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <footer class="footer-fixed">Rodapé Fixo (`position: fixed`)</footer>
</body>
</html>

Resultado:

Observe como o header-fixed e o footer-fixed permanecem na tela mesmo ao rolar.
Veja como o relative-box se move, mas o parágrafo abaixo dele não preenche o espaço.
Note que o absolute-box está posicionado em relação ao .container (que é relative) e não afeta o fluxo dos parágrafos.
Role a página para ver o sticky-box se comportar como relative e depois "grudar" no topo da viewport.

Boas Práticas:

position: relative como Contêiner: Use position: relative no elemento pai quando precisar posicionar um filho com position: absolute dentro dele.
z-index para Sobreposição: Quando elementos se sobrepõem, use z-index para controlar qual deles aparece por cima.
Cuidado com o Fluxo: Lembre-se que absolute e fixed removem o elemento do fluxo normal do documento, o que pode afetar o layout de outros elementos.
sticky Requer Offset: position: sticky só funciona se você definir pelo menos uma propriedade de offset (top, right, bottom, left).

Dominar a propriedade position é um passo crucial para criar layouts dinâmicos e visualmente ricos, permitindo que você posicione elementos com precisão onde desejar na sua página.

Os Cinco Valores da Propriedade position

1. position: static (Padrão)

2. position: relative

3. position: absolute

4. position: fixed

5. position: sticky