Prof. Leon Blog

Appearance

Exemplos: Posicionamento CSS ​

← Voltar para a aula

position: fixed ​

Um elemento com position: fixed gruda em um ponto e não se move ao rolar. Para demonstrar isso com segurança dentro do artigo (sem grudar na janela inteira do navegador), o quadro abaixo usa transform no contêiner. Isso cria um novo containing block, então o fixed gruda ao contêiner em vez da viewport. Role o conteúdo interno:

position: fixed↑ esta barra não rola

Role esta área para baixo. A barra acima permanece fixa no topo do quadro.

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.

Fim do conteúdo de exemplo.

css
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100; /* fica sobre o conteúdo */
}

position: static (padrão) ​

Todos os elementos HTML são static por padrão. Eles seguem o fluxo normal do documento. As propriedades top, left, etc. não têm efeito.

Bloco 1
Bloco 2
Bloco 3

position: relative ​

O elemento é deslocado em relação à sua posição original. Ele continua ocupando o espaço original no fluxo (note o "buraco" abaixo do item amarelo).

Bloco 1
relative
top:20 left:15
Bloco 3
css
.rel {
  position: relative;
  top: 20px;
  left: 15px; /* desloca, mas ocupa o espaço original */
}

position: absolute ​

O elemento é removido do fluxo e posicionado em relação ao ancestral posicionado mais próximo (aquele com position ≠ static). Se não houver nenhum, usa o viewport.

elemento normal (static)
absolute
top:8 right:8
absolute: bottom:8, centrado
css
.container {
  position: relative; /* cria o contexto de posicionamento */
}

.abs {
  position: absolute;
  top: 8px;
  right: 8px;
}

Caso prático: card com badge ​

Um uso clássico de absolute dentro de um container relative.

NOVO

Produto Alpha

R$ 199,00

-30%

Produto Beta

R$ 299,00 R$ 209,00

css
.card { position: relative; } /* cria contexto */

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

position: sticky ​

O elemento comporta-se como relative até atingir o limiar de scroll definido; então gruda como se fosse fixed. Role a caixa abaixo:

Seção A: gruda ao rolar ↓
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Seção B: gruda ao rolar ↓
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
Seção C: gruda ao rolar ↓
Sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla ullamcorper, ante id commodo luctus, ante leo maximus leo, non viverra quam ligula quis eros.
css
.section-header {
  position: sticky;
  top: 0;         /* gruda quando chegar a 0px do topo */
  background: #fff;
  z-index: 1;
}

z-index: ordem de empilhamento ​

Quando elementos se sobrepõem, o z-index determina qual fica na frente. Valores maiores aparecem sobre os menores.

z-index: 1
z-index: 2
z-index: 3

Altere o z-index de cada caixa interativamente:

Lembre-se

z-index só funciona em elementos com position diferente de static (relative, absolute, fixed ou sticky).