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?

Tomb Raider - O Filme

Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.

Nintendo Entertainment System

O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.

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.

Muitos aplicativos

Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.

Cuidados com o notebook

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.