Skip to main content

Position | CSS

  • Position | CSS

A propriedade position no CSS é uma das ferramentas mais poderosas para controlar o layout e a posição de elementos dentro de uma página web. Ela define como um elemento é posicionado em relação ao seu contêiner ou à tela.

Valores da Propriedade position​

A propriedade position pode ter cinco valores principais:

1. static (Padrão)​

  • Descrição: Este é o valor padrão para todos os elementos. Quando um elemento tem position: static;, ele é posicionado de acordo com o fluxo normal do documento. Ou seja, ele será posicionado de acordo com a ordem no HTML, sem qualquer controle específico sobre sua posição.
  • Comportamento: Não permite o uso de top, right, bottom ou left.

Exemplo:

div {
    position: static;
}

2. relative​

  • Descrição: Um elemento com position: relative; é posicionado em relação à sua posição normal no fluxo de documentos. Ou seja, ele começa no lugar onde estaria se tivesse position: static;, mas você pode deslocá-lo usando as propriedades top, right, bottom ou left.
  • Comportamento: O elemento ainda ocupa o mesmo espaço no layout, mas pode ser movido de acordo com os valores definidos para top, right, bottom, ou left. Isso é útil para criar pequenos ajustes de posicionamento.

Exemplo:

div {
    position: relative;
    top: 10px;
    left: 20px;
}

O elemento será movido 10px para baixo e 20px para a direita a partir da sua posição original.

3. absolute​

  • Descrição: Quando um elemento tem position: absolute;, ele é posicionado em relação ao seu contêiner mais próximo que tem position diferente de static. Se não houver tal contêiner, ele será posicionado em relação ao elemento <html>, ou seja, a janela de visualização (viewport).
  • Comportamento: O elemento é retirado do fluxo normal do documento, o que significa que ele não afeta o posicionamento de outros elementos ao redor. Ele pode ser posicionado usando as propriedades top, right, bottom, e left.

Exemplo:

div {
    position: absolute;
    top: 50px;
    left: 100px;
}

Isso fará com que o elemento seja posicionado 50px abaixo do topo e 100px à direita da borda esquerda do contêiner mais próximo com position diferente de static.

4. fixed​

  • Descrição: Um elemento com position: fixed; é posicionado em relação à janela de visualização (viewport), ou seja, ele permanece fixo na tela enquanto o usuário rola a página. Isso é útil para criar barras de navegação fixas ou botões flutuantes.
  • Comportamento: O elemento é retirado do fluxo normal do documento, assim como o absolute. Ele será posicionado com base nas propriedades top, right, bottom, ou left, mas permanecerá visível na mesma posição ao rolar a página.

Exemplo:

div {
    position: fixed;
    top: 0;
    right: 0;
}

Este elemento ficará fixado no canto superior direito da tela e permanecerá visível enquanto o usuário rola a página.

5. sticky​

  • Descrição: Um elemento com position: sticky; é posicionado de maneira normal no fluxo de documento até que o ponto de rolagem atinja um limite específico (definido pelas propriedades top, right, bottom, ou left). Quando isso acontece, o elemento fica "preso" na posição definida e continua visível enquanto o usuário rola a página.
  • Comportamento: O elemento se comporta como relative até que o ponto de rolagem atinja o limite especificado, momento em que ele se torna "fixo" até que sua área de rolagem seja ultrapassada.

Exemplo:

div {
    position: sticky;
    top: 0;
}

Este elemento será posicionado no fluxo normal até que o usuário role a página e, ao atingir o topo da tela, ele ficará "fixo" no topo até que o elemento saia da área visível.

Exemplos Práticos​

Aqui estão exemplos práticos de como usar cada tipo de position:

1. Exemplo com position: relative​

<div style="position: relative; top: 20px; left: 30px;">
    Este div é posicionado relativamente.
</div>

2. Exemplo com position: absolute​

<div style="position: absolute; top: 50px; right: 50px;">
    Este div é posicionado absolutamente.
</div>

3. Exemplo com position: fixed​

<div style="position: fixed; bottom: 0; right: 0;">
    Este div fica fixo no canto inferior direito da tela.
</div>

4. Exemplo com position: sticky​

<header style="position: sticky; top: 0; background-color: lightblue;">
    Este cabeçalho ficará preso no topo durante o rolar da página.
</header>

Resumo das Diferenças​

Valor de positionComportamentoExemplo de Uso
staticPosição normal, sem controle.Padrão de todos os elementos.
relativePosicionado em relação à sua posição original no fluxo.Ajuste de posição leve.
absolutePosicionado em relação ao contêiner mais próximo com position diferente de static.Elementos independentes do fluxo.
fixedPosicionado em relação à viewport e permanece fixo na tela ao rolar.Barra de navegação fixa ou botões.
stickySe comporta como relative até que um ponto de rolagem seja alcançado, depois fica fixo.Cabeçalhos fixos durante a rolagem.