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:
staticrelativeabsolutefixedsticky
Position static (padrão)
Todo elemento começa com position: static.
Nesse modo:
- O elemento segue o fluxo normal
- As propriedades
top,right,bottomeleftnã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;
}
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; }
Propriedades de posicionamento
As propriedades usadas com position são:
toprightbottomleft
Elas definem o deslocamento do elemento.
Boas práticas com position
- Evite usar
absolutepara layout principal - Prefira Flexbox e Grid para layouts
- Use
positionpara ajustes pontuais
absolute, algo está errado. 💾🧠 Resumo da aula para nunca mais esquecer
positioncontrola o posicionamento dos elementosstaticé o padrãorelativemantém o elemento no fluxoabsoluteremove do fluxofixedfixa na telastickycombina 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.
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.










