Até agora, os elementos seguiram o fluxo normal do documento. Mas às vezes precisamos posicionar algo de forma específica.

É aí que entra a propriedade position.

O que é position?

A propriedade position define como um elemento é posicionado em relação à página ou a outros elementos.

Os valores mais importantes são:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Position static (padrão)

Todo elemento começa com position: static.

Nesse modo:

  • O elemento segue o fluxo normal
  • As propriedades top, right, bottom e left não funcionam
 .elemento { position: static; }

Position relative

Com position: relative, o elemento continua no fluxo, mas pode ser deslocado a partir da sua posição original. 

 .caixa { position: relative; top: 10px; left: 20px; }

O espaço original do elemento é mantido.

relative é muito usado como referência para elementos absolutos.

Position absolute

O position: absolute remove o elemento do fluxo normal.

Ele se posiciona em relação ao primeiro ancestral com position diferente de static. 

 .container { position: relative; }

.item {
position: absolute;
top: 0;
right: 0;
}
Se não houver um ancestral posicionado, o elemento será relativo ao body.

Position fixed

Com position: fixed, o elemento:

  • Fica fixo na tela
  • Não se move ao rolar a página
 .menu { position: fixed; top: 0; width: 100%; }

É comum usar em menus e botões flutuantes.

Position sticky

O position: sticky é uma mistura de relative com fixed.

O elemento:

  • Se comporta como relativo
  • Fica fixo ao atingir um ponto da rolagem
 .cabecalho { position: sticky; top: 0; }
Muito útil para cabeçalhos de seções.

Propriedades de posicionamento

As propriedades usadas com position são:

  • top
  • right
  • bottom
  • left

Elas definem o deslocamento do elemento.

Boas práticas com position

  • Evite usar absolute para layout principal
  • Prefira Flexbox e Grid para layouts
  • Use position para ajustes pontuais
Se tudo está em absolute, algo está errado.

💾🧠 Resumo da aula para nunca mais esquecer

  • position controla o posicionamento dos elementos
  • static é o padrão
  • relative mantém o elemento no fluxo
  • absolute remove do fluxo
  • fixed fixa na tela
  • sticky combina relativo e fixo

Na próxima aula, vamos entrar em um dos maiores aliados do CSS moderno: Flexbox 💪📐

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.

ENIAC

O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.

Final Fantasy

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.