Propriedade CSS position

A propriedade CSS position controla como um elemento é posicionado no documento e como ele responde às propriedades de deslocamento top, right, bottom e left. É uma das propriedades mais importantes para construir elementos de interface em camadas, fixos ou flutuantes.

Esta propriedade aceita cinco valores principais:

static — o padrão; o elemento permanece no fluxo normal do documento.
relative — o elemento mantém seu espaço no fluxo, mas pode ser deslocado com as propriedades de deslocamento.
absolute — o elemento é removido do fluxo e posicionado em relação ao seu ancestral posicionado mais próximo.
fixed — o elemento é removido do fluxo e posicionado em relação ao viewport.
sticky — o elemento alterna entre relative e fixed conforme você rola a página.

Esta página explica quando usar cada valor, as regras que regem os deslocamentos e os blocos de contenção, e os erros comuns que costumam confundir as pessoas.

Como funcionam os deslocamentos e blocos de contenção

As propriedades de deslocamento top, right, bottom e left só têm efeito em elementos posicionados — ou seja, qualquer elemento cuja position não seja static. Em um elemento static, elas são ignoradas.

A partir de onde cada deslocamento é medido depende do valor:

relative — os deslocamentos são medidos a partir da posição normal do próprio elemento. top e bottom o movem verticalmente; left e right o movem horizontalmente. O espaço que ele ocupava originalmente é preservado, portanto o conteúdo ao redor não se desloca.
absolute — os deslocamentos são medidos a partir das bordas do bloco de contenção: o ancestral mais próximo que seja ele próprio posicionado (relative, absolute, fixed ou sticky). Se não existir tal ancestral, os deslocamentos são relativos ao bloco de contenção inicial (aproximadamente o elemento <html> / página).
fixed — os deslocamentos são medidos a partir do viewport, portanto o elemento permanece fixo enquanto a página rola.
sticky — os deslocamentos definem um limite; o elemento se comporta como relative até que você role além desse limite, e então fica fixo como fixed dentro de seu contêiner de rolagem.

Um erro frequente é esperar que um filho absolute se alinhe ao seu pai sem definir position: relative (ou qualquer valor não estático) nesse pai. Adicionar position: relative ao pai — mesmo sem deslocamentos — o transforma no bloco de contenção. Este padrão de "pai relativo, filho absoluto" é a base da maioria dos layouts posicionados.

Valor Inicial	static
Aplica-se a	Todos os elementos.
Herdado	Não.
Animável	Não.
Versão	CSS2
Sintaxe DOM	Object.style.position = "sticky";

Sintaxe

Sintaxe CSS da propriedade position

position: static | absolute | fixed | relative | sticky | initial | inherit;

Um exemplo simples com absolute

Aqui position: absolute retira o parágrafo do fluxo e o posiciona a 40px da esquerda e 120px do topo da página (não existe ancestral posicionado, portanto a página é a referência):

Exemplo de código CSS com position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        position: absolute;
        left: 40px;
        top: 120px;
      }
    </style>
  </head>
  <body>
    <h2>Position property example</h2>
    <p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade position com todos os valores:

Exemplo CSS com todos os valores de position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #box1 {
        position: static;
        border: 2px solid #666;
        width: 300px;
        height: 100px;
      }
      #box2 {
        position: absolute;
        border: 2px solid #8ebf42;
        top: 70px;
        right: 15px;
      }
      #box3 {
        position: relative;
        border: 2px solid #666;
        width: 300px;
        height: 100px;
      }
      #box4 {
        position: absolute;
        border: 2px solid #8ebf42;
        top: 70px;
        right: 15px;
      }
      #box5 {
        position: absolute;
        border: 2px solid #666;
        width: 320px;
        height: 100px;
        top: 750px;
        right: 25px;
      }
      #box6 {
        position: absolute;
        border: 2px solid #8ebf42;
        top: 70px;
        right: 15px;
      }
      #box7 {
        position: fixed;
        border: 2px solid #8ebf42;
        background-color: #eee;
        width: 300px;
        height: 100px;
        bottom: 0;
        left: 0;
        right: 0;
      }
      #box8 {
        position: absolute;
        border: 2px solid #666;
        top: 70px;
        right: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Position property example</h2>
    <h3>Position: static</h3>
    <p>
      The Box1 element remains in the natural flow of the page and does not act as anchor point for the absolutely positioned Box2 element:
    </p>
    <div id="box1">
      Box1: position: static.
      <div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: relative</h3>
    <p>
      The Box3 element remains in the natural flow of the page and also acts as anchor point for the absolutely positioned Box4 element:
    </p>
    <div id="box3">
      Box3: position: relative.
      <div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: absolute</h3>
    <p>
      The Box5 element does not remain in the natural flow of the page. It positions itself according to the closest positioned ancestor and also acts as anchor point for the absolutely positioned Box6 element:
    </p>
    <div id="box5">
      Box5: position: absolute, top: 750px, right: 15px.
      <div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: fixed</h3>
    <p>
      The Box7 element does not remain in the natural flow of the page and positions itself according to the viewport and acts as anchor point for the absolutely positioned Box8 element:
    </p>
    <div id="box7">
      Box7: position: fixed, bottom: 0, left: 0, right: 0.
      <div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Neste exemplo, box1 (static) e box3 (relative) permanecem no fluxo normal, mas apenas box3 atua como bloco de contenção para seu filho posicionado absolutamente, porque relative o torna um ancestral posicionado enquanto static não. box5 e box7 são retirados do fluxo e posicionados em relação à página e ao viewport, respectivamente.

Posicionamento sticky

Um elemento sticky rola normalmente até atingir o deslocamento especificado (aqui top: 1px), e então "gruda" no lugar dentro de seu contêiner de rolagem. É ideal para cabeçalhos de tabelas, rótulos de seções e barras de ferramentas que devem permanecer visíveis enquanto sua seção está na tela. Observe que o posicionamento sticky só funciona enquanto o ancestral de rolagem do elemento está sendo rolado, e o ancestral não deve ter overflow: hidden cortando-o.

Exemplo da propriedade position com o valor "sticky":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        height: 150px;
        overflow: auto;
        position: relative;
        background-color: #cccccc;
        padding: 0;
      }
      ul li {
        list-style-type: none;
        height: 30px;
        padding: 10px 10px 0;
      }
      ul li:first-child {
        position: -webkit-sticky;
        position: sticky;
        top: 1px;
        background-color: #dddddd;
      }
    </style>
  </head>
  <body>
    <h2>Example of the position property with the "sticky" value:</h2>
    <ul>
      <li>Sticky List Item</li>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
      <li>List Item 5</li>
      <li>List Item 6</li>
      <li>List Item 7</li>
      <li>List Item 8</li>
      <li>List Item 9</li>
    </ul>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
static	Os elementos são posicionados de acordo com o fluxo normal do documento. Este é o valor padrão da propriedade.	Experimente »
absolute	Os elementos são removidos do fluxo do documento e posicionados em relação ao seu elemento ancestral posicionado.	Experimente »
fixed	Os elementos são removidos do fluxo do documento e posicionados em relação à janela do navegador.	Experimente »
relative	O elemento é posicionado em relação à sua posição normal; as propriedades de deslocamento o deslocam sem remover seu espaço original.	Experimente »
sticky	Os elementos são posicionados de acordo com o fluxo normal do documento e, em seguida, deslocados em relação ao seu ancestral de rolagem mais próximo e ao bloco de contenção.
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do seu elemento pai.

Quando usar cada valor

static — deixe como está para conteúdo normal do documento. Raramente se define static explicitamente, exceto para redefinir uma regra de posicionamento.
relative — para fazer pequenos ajustes visuais ou, mais frequentemente, para tornar um elemento o bloco de contenção de um filho absolute sem removê-lo do fluxo.
absolute — para sobreposições, badges, tooltips e menus suspensos que devem ser posicionados com precisão dentro de um pai relative.
fixed — para elementos fixados ao viewport: cabeçalhos fixos que nunca se movem, botões "voltar ao topo", banners de cookies e modais.
sticky — para cabeçalhos ou rótulos que devem rolar com o conteúdo até certo ponto e depois permanecer visíveis.

Quando elementos posicionados se sobrepõem, a ordem de frente para trás é controlada pela propriedade z-index. O posicionamento também é comumente combinado com float, display e overflow na construção de layouts.

Como funcionam os deslocamentos e blocos de contenção

Sintaxe

Um exemplo simples com absolute

Resultado

Exemplo da propriedade position com todos os valores:

Posicionamento sticky

Exemplo da propriedade position com o valor "sticky":

Valores

Quando usar cada valor

Prática