Posicionamento
O curso trata da propriedade position do CSS e de seus valores. Começa por static, o padrão, em que os deslocamentos top, right, bottom e left são ignorados. Depois mostra relative, que desloca o elemento mantendo seu espaço reservado, e absolute, que tira o elemento do fluxo e o posiciona pelo ancestral posicionado mais próximo. As aulas seguintes tratam do padrão relative com absolute em badges, dropdowns e tooltips, de fixed ancorado na viewport e do z-index na ordem de empilhamento. A última aula junta tudo numa página.
O que você vai aprender
- ✓Como position: static funciona e por que os deslocamentos são ignorados nele
- ✓Deslocar um elemento com position: relative mantendo seu espaço reservado
- ✓Posicionar elementos com position: absolute pelo ancestral posicionado mais próximo
- ✓Usar um container relative com um filho absolute em badges, dropdowns e tooltips
- ✓Ancorar elementos na viewport com position: fixed
- ✓Controlar sobreposições com a ordem do HTML e o z-index
position: static — o padrão que você sempre teve
Todo elemento de todo curso até aqui, no fluxo normal ou no flexbox, compartilhou uma configuração que você nunca escreveu: position: static. É o valor padrão de uma propriedade que este curso finalmente nomeia.
Ler a aula completa grátis →Currículo
7 aulasposition: static — o padrão que você sempre teve
Apresenta position: static, o valor padrão, e mostra que os deslocamentos são ignorados em elementos static.
position: relative — deslocando um elemento da própria posição
Mostra como position: relative desloca o elemento visualmente enquanto o espaço original continua reservado no fluxo.
position: absolute — removido do fluxo, posicionado contra um ancestral
Trata do position: absolute, que tira o elemento do fluxo e mede deslocamentos pelo ancestral posicionado mais próximo.
O padrão de contexto: relative + absolute
Combina relative num container com um filho absolute para montar badges, menus dropdown e tooltips.
position: fixed — ancorado à viewport, ignorando o scroll
Explica position: fixed, que ancora o elemento na viewport para ele ficar parado durante a rolagem.
z-index e ordem de empilhamento
Mostra como a ordem do HTML e o z-index decidem qual elemento sobreposto fica por cima.
Juntando tudo: um card, um dropdown e um cabeçalho fixo
Monta um cabeçalho fixo, um card com badge no canto e um menu dropdown numa página.