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

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.

Space Invaders

O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.

PDP-1

O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.

Computadores de 1,5 tonelada

Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.