Pular para conteúdo

Aula 11 - Display e Posicionamento 📍

Objetivo

Objetivo: Compreender como os elementos se comportam no fluxo da página (display) e aprender a movê-los e fixá-los em locais específicos utilizando a propriedade position.

1. O Comportamento Display 🎛️

A propriedade display define como o elemento se comporta em relação aos seus vizinhos.

  • block: O elemento ocupa toda a largura disponível (como um parágrafo ou título). Ele sempre pula para uma nova linha.
  • inline: O elemento ocupa apenas o espaço necessário para o seu conteúdo (como um link ou negrito). Ele não permite definir width ou height.
  • inline-block: Um híbrido. Ele fica na mesma linha que outros, mas permite definir largura, altura e padding.
  • none: O elemento desaparece completamente da página (ele nem ocupa espaço).

2. Posicionamento (Position) 🧭

Por padrão, os elementos seguem o fluxo natural (um abaixo do outro). Com position, podemos quebrar esse fluxo.

  1. static: O padrão. O elemento segue o fluxo normal.
  2. relative: O elemento se move em relação à sua posição original, mas ainda ocupa o espaço original.
  3. absolute: O elemento "flutua" e se move em relação ao seu pai que tenha um posicionamento definido (não-static). Ele sai do fluxo normal.
  4. fixed: O elemento fica "colado" na tela do navegador, mesmo que você role a página.
  5. sticky: O elemento se comporta como relativo até atingir um ponto específico na rolagem, onde ele fica "preso" (muito usado em menus).

3. Visualizando o Posicionamento 📊

graph TD
    S[Static - Fluxo Normal] --> R[Relative - Move mas deixa espaço]
    R --> A[Absolute - Flutua em relação ao Pai]
    A --> F[Fixed - Preso no Navegador]

4. Coordenadas: top, bottom, left e right 🗺️

Quando usamos relative, absolute ou fixed, podemos usar estas propriedades para definir a distância exata:

.alerta {
    position: fixed;
    top: 20px;
    right: 20px;
}

[!IMPORTANT] A propriedade z-index define quem fica "em cima" de quem quando os elementos se sobrepõem. Quanto maior o número, mais à frente o elemento fica.

5. Prática: Menu Fixo e Botão Flutuante 🚀

Vamos experimentar com o terminal:

$ touch index.html estilo.css
$ # No CSS, crie um elemento que não sai da tela:
$ .botao-suporte {
$   position: fixed;
$   bottom: 10px;
$   right: 10px;
$   background-color: yellow;
$ }

6. Mini-Projeto: Dashboard com Menu Sticky 🖱️

  1. Crie uma página longa com muito texto (use lorem ipsum).
  2. Crie um <nav> com a classe .menu.
  3. No CSS, aplique position: sticky; top: 0; ao menu.
  4. Crie um pequeno quadrado no canto inferior direito com position: fixed.
  5. Dica: Use background-color diferentes para visualizar bem onde cada elemento começa e termina.

7. Exercícios Progressivos 📝

Básicos

  1. Qual a diferença entre display: block e display: inline?
  2. O que acontece com um elemento se usarmos display: none?

Intermediários

  1. Se eu quiser que um menu de topo não suma ao rolar a página, qual position devo usar?
  2. Explique a relação entre um elemento com position: absolute e o seu pai.

Desafio 🧠

  1. Pesquise e explique para que serve o z-index. O que acontece se dois elementos tiverem o mesmo z-index e estiverem sobrepostos?

Próxima Aula: Vamos aprender a alinhar tudo perfeitamente com o Flexbox! 📐