Propriedades top, right, bottom, left: Ajustando a posição

Use essas propriedades para mover elementos posicionados.

Depois de definir o tipo de posicionamento de um elemento com a propriedade position (seja relative, absolute, fixed ou sticky), você precisa dizer ao navegador onde exatamente esse elemento deve ser colocado. É para isso que servem as propriedades top, right, bottom e left.

Essas propriedades são conhecidas como propriedades de offset ou propriedades de deslocamento. Elas especificam a distância de um elemento posicionado em relação às bordas de seu contêiner de posicionamento.

Pense nessas propriedades como as coordenadas que você dá a um objeto em um mapa. Uma vez que você decide que o objeto pode ser movido (position), você usa top, right, bottom, left para dizer "a tantos quilômetros do norte, a tantos do leste", etc.

Como funcionam top, right, bottom, left

As propriedades top, right, bottom e left só têm efeito em elementos que possuem um position diferente de static (ou seja, relative, absolute, fixed ou sticky).

  • top: Define a distância do lado superior do elemento em relação ao lado superior do seu contêiner de posicionamento.
  • right: Define a distância do lado direito do elemento em relação ao lado direito do seu contêiner de posicionamento.
  • bottom: Define a distância do lado inferior do elemento em relação ao lado inferior do seu contêiner de posicionamento.
  • left: Define a distância do lado esquerdo do elemento em relação ao lado esquerdo do seu contêiner de posicionamento.

Valores possíveis:

  • Comprimento (px, em, rem, vw, vh, etc.): Define uma distância fixa.
    • Exemplo: top: 20px; left: 50px;
  • Porcentagem (%): Define uma distância como porcentagem da dimensão correspondente do contêiner de posicionamento.
    • Exemplo: top: 10%; left: 25%;
  • auto (padrão): O navegador calcula a posição automaticamente.

Contêiner de Posicionamento

O "contêiner de posicionamento" é o elemento em relação ao qual top, right, bottom, left calculam suas distâncias. Ele varia de acordo com o valor de position:

  • position: relative: As propriedades de offset movem o elemento em relação à sua própria posição original no fluxo do documento.
  • position: absolute: As propriedades de offset movem o elemento em relação ao seu ancestral posicionado mais próximo (o primeiro pai, avô, etc., que tenha position: relative, absolute, fixed ou sticky). Se não houver nenhum ancestral posicionado, ele se posiciona em relação ao <body> do documento.
  • position: fixed: As propriedades de offset movem o elemento em relação à viewport (janela do navegador).
  • position: sticky: As propriedades de offset movem o elemento em relação ao seu contêiner de rolagem (geralmente a viewport ou um elemento com overflow: scroll).

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedades Top, Right, Bottom, Left</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      height: 1500px; /* Para ter barra de rolagem */
      background-color: #f4f4f4;
    }

    .container {
      width: 600px;
      height: 400px;
      background-color: #e0e0e0;
      border: 2px dashed #999;
      margin: 50px auto;
      position: relative; /* Contêiner de posicionamento para 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;
      font-size: 0.9em;
    }

    /* Elemento com position: relative */
    .relative-box {
      position: relative;
      top: 30px; /* Desloca 30px para baixo da sua posição original */
      left: 50px; /* Desloca 50px para a direita da sua posição original */
      background-color: lightgreen;
      margin-bottom: 50px; /* Para mostrar que o espaço original é mantido */
    }

    /* Elemento com position: absolute */
    .absolute-box {
      position: absolute;
      top: 20px;
      right: 20px;
      background-color: lightcoral;
    }

    /* Elemento com position: fixed */
    .fixed-box {
      position: fixed;
      bottom: 20px;
      left: 20px;
      background-color: lightgoldenrodyellow;
      z-index: 100; /* Para ficar acima de outros elementos */
    }

    /* Elemento com position: sticky */
    .sticky-box {
      position: sticky;
      top: 10px; /* Gruda 10px do topo da viewport */
      width: 120px;
      height: 60px;
      background-color: lightseagreen;
      border: 2px solid darkgreen;
      line-height: 60px;
      margin-left: 50px;
      z-index: 50;
    }

    p {
      margin-bottom: 15px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Propriedades `top`, `right`, `bottom`, `left`</h1>

  <div class="container">
    <h2>`position: relative`</h2>
    <p>Este é um parágrafo antes do box relativo.</p>
    <div class="box relative-box">Relative Box (top: 30px, left: 50px)</div>
    <p>Este é um parágrafo depois do box relativo. Note que o espaço original do box ainda é reservado.</p>

    <h2>`position: absolute`</h2>
    <p>O Absolute Box está posicionado 20px do topo e 20px da direita do seu contêiner pai (`.container`).</p>
    <div class="box absolute-box">Absolute Box (top: 20px, right: 20px)</div>
    <p>Este parágrafo está no fluxo normal, ignorando o Absolute Box.</p>
  </div>

  <div class="box fixed-box">Fixed Box (bottom: 20px, left: 20px)</div>

  <h2>`position: sticky`</h2>
  <p>Role a página para baixo para ver o Sticky Box grudar no topo da viewport, a 10px da borda superior.</p>
  <div class="box sticky-box">Sticky Box (top: 10px)</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>
</body>
</html>

Resultado:

  • Observe como o relative-box se move para baixo e para a direita de sua posição original, mas o texto ao redor ainda respeita o espaço que ele ocuparia se não fosse deslocado.
  • Veja como o absolute-box se posiciona dentro do .container (que é position: relative;) e o texto ao redor o ignora.
  • Note que o fixed-box permanece no canto inferior esquerdo da viewport, independentemente da rolagem.
  • Role a página para ver o sticky-box se comportar como relative e depois "grudar" no topo da viewport a 10px de distância.

Boas Práticas:

  • Sempre com position: Lembre-se que top, right, bottom, left só funcionam com position diferente de static.
  • Contexto de Posicionamento: Entenda qual é o contêiner de posicionamento para cada tipo de position. Isso é crucial para prever onde o elemento será colocado.
  • Evite Conflitos: Não defina top e bottom ao mesmo tempo, ou left e right ao mesmo tempo, a menos que você queira esticar o elemento (o que pode ser útil em alguns casos, mas geralmente é melhor usar apenas dois lados opostos).
  • Valores Negativos: Você pode usar valores negativos para top, right, bottom, left para mover um elemento para fora de seu contêiner de posicionamento.

Dominar as propriedades de offset (top, right, bottom, left) em conjunto com a propriedade position é essencial para criar layouts precisos e dinâmicos, permitindo um controle fino sobre a localização de cada elemento na sua página.