Aula 11 - Display e Posicionamento 📍

Onde e Como as Coisas Ficam na Tela

👋 Olá!

Até agora, as caixas ficavam uma abaixo da outra.

Hoje vamos aprender a quebrar as regras de gravidade da Web! 🚀

Agenda de Hoje 📅

Propriedade Display
Block vs Inline
Elementos Invisíveis (none)
Posicionamento Static e Relative
O Poder do Absolute
Elementos Fixos (Fixed e Sticky)

🎛️ 1. Propriedade Display

Define como o elemento interage com seus vizinhos.

Block (Bloco) 🧱

Ocupa toda a largura disponível.
Empilha elementos um abaixo do outro.
Ex: div, p, h1.

Inline (Em linha) ⛓️

Ocupa apenas o espaço do conteúdo.
Não aceita width ou height.
Ex: span, a, strong.

Inline-Block ⚖️

O melhor dos dois mundos.
Fica na mesma linha, mas aceita largura e altura!

Display: none 👻

O elemento desaparece da tela.
Não ocupa espaço algum no layout.

🧭 2. Posicionamento (Position)

Static (Padrão) 🗼

É o fluxo natural do HTML.
Top, Left, Bottom e Right não funcionam aqui.

Relative 📍

Move o elemento sem tirar ele do "lugar original".
Funciona como um "desvio".

Absolute 🚀

O elemento flutua!
Move-se em relação ao seu pai (que não seja static).
Sai do fluxo normal da página.

Fixed 📌

Fica preso na janela do navegador.
Não se move mesmo que você role a página.
Útil para botões de chat ou suporte.

Sticky (Grudento) 🍯

O elemento "gruda" quando atinge o topo.
Sensacional para menus de navegação!

📊 Resumo do Position

graph LR
    Static[Static - Normal]
    Relative[Relative - Move]
    Absolute[Absolute - Flutua]
    Fixed[Fixed - Gruda na Tela]
    Sticky[Sticky - Gruda no Topo]

🔢 3. z-index

Define quem fica "na frente".
Números maiores = Mais perto de você.

🗺️ 4. Coordenadas

Sempre use: - top / bottom - left / right

.alerta {
  position: fixed;
  top: 0;
  right: 0;
}

Resumo da Aula ✅

Display define como o elemento se comporta (bloco ou linha).
Position define se ele sai ou não do fluxo.
Relative = Move de leve.
Absolute = Sai do fluxo.
Fixed/Sticky = Fixação.

Próxima Aula 📐

Flexbox

O fim de todos os seus problemas de alinhamento!

Dúvidas? 🤔

"Posicionar elementos é como jogar xadrez: cada peça tem seu movimento e sua importância no tabuleiro."