HTML & CSS — Exercicios

position: absolute

Cinco exercicios em ordem de dificuldade para praticar posicionamento absoluto do zero.

EX 01
O ponto que voce manda
Posicione um circulo exatamente onde voce quer dentro de uma caixa.
Facil

O que fazer

  • Crie uma <div> de 300x150px com position: relative
  • Dentro dela, coloque outra <div> (o circulo) com position: absolute
  • Posicione o circulo a 20px do topo e 20px da esquerda
  • Depois tente mover ele para o canto inferior direito

Resultado esperado

top: 16pxleft: 16px
Codigo inicial
<style>
  .caixa {
    position: relative; /* ← fundamental! */
    width: 300px;
    height: 150px;
    background: #e8e3d8;
  }

  .circulo {
    position: absolute;
    width: 30px;
    height: 30px;
    background: blue;
    border-radius: 50%;
    top: ???; /* complete aqui */
    left: ???;
  }
</style>

<div class="caixa">
  <div class="circulo"></div>
</div>

EX 02
Badge de notificacao
Coloque um bolinho vermelho no canto de um card, como os apps de celular fazem.
Facil

O que fazer

  • Crie um card (div de tamanho fixo) com position: relative
  • Dentro do card, adicione o badge com position: absolute
  • Posicione o badge no canto superior direito, meio saindo do card (top: -10px; right: -10px)
  • Coloque um numero dentro do badge (ex.: 5)

Resultado esperado

5top:-8px / right:-8px
Codigo inicial
<style>
  .card {
    position: relative; /* o pai precisa disso */
    width: 160px;
    height: 90px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
  }

  .badge {
    position: absolute;
    background: red;
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    /* onde voce coloca o badge? */
    top: ???;
    right: ???;
  }
</style>

<div class="card">
  <div class="badge">5</div>
</div>

EX 03
Legenda sobre imagem
Coloque um texto por cima de uma imagem, fixado na parte de baixo — como uma legenda de foto.
Medio

O que fazer

  • Crie um conteiner com position: relative e overflow: hidden
  • Dentro, coloque uma imagem que preencha todo o espaco (width: 100%; height: 100%; object-fit: cover)
  • Adicione uma <div> com o texto da legenda usando position: absolute
  • Fixe a legenda na parte de baixo com bottom: 0; left: 0; right: 0
  • Coloque um fundo escuro semi-transparente na legenda

Resultado esperado

Uma foto bonita com legenda
Codigo inicial
<style>
  .foto-container {
    position: relative;
    width: 300px;
    height: 180px;
    overflow: hidden; /* esconde o que sair */
    border-radius: 8px;
  }

  .foto-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .legenda {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px;
  }
</style>

<div class="foto-container">
  <img src="sua-foto.jpg" alt="descricao">
  <div class="legenda">Uma foto bonita</div>
</div>

EX 04
Menu dropdown
Crie um botao que, quando hovered, mostra um menu abaixo dele.
Medio

O que fazer

  • Crie um conteiner com position: relative e display: inline-block
  • Dentro coloque um botao com o texto "Menu ▾"
  • Adicione uma <div> de dropdown com position: absolute
  • Posicione o dropdown logo abaixo do botao com top: 100% e left: 0
  • Use display: none no dropdown e display: block no :hover do conteiner

Resultado esperado

Menu ▾
Perfil
Configuracoes
Sair
Codigo inicial
<style>
  .menu {
    position: relative;
    display: inline-block;
  }

  .dropdown {
    position: absolute;
    top: 100%; /* logo abaixo do pai */
    left: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px;
    width: 150px;
    display: none; /* comeca escondido */
  }

  .menu:hover .dropdown {
    display: block; /* aparece no hover */
  }
</style>

<div class="menu">
  <button>Menu ▾</button>
  <div class="dropdown">
    <p>Perfil</p>
    <p>Configuracoes</p>
    <p>Sair</p>
  </div>
</div>

EX 05
Modal centralizado com fundo escuro
Crie uma janela de dialogo centralizada na tela com um fundo escurecido por tras.
Avancado

O que fazer

  • Crie uma <div class="overlay"> com position: fixed, cobrindo a tela toda (top: 0; left: 0; width: 100%; height: 100%) com fundo escuro semi-transparente
  • Dentro do overlay, crie a <div class="modal"> com position: absolute
  • Centralize o modal usando top: 50%; left: 50% e transform: translate(-50%, -50%)
  • Adicione um botao "Fechar" que esconda o overlay com JavaScript

Resultado esperado

Atencao!

Este e um modal centralizado na tela.

Fechar
Codigo inicial
<style>
  .overlay {
    position: fixed; /* cobre a janela do navegador */
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* truque do centro */
    background: white;
    border-radius: 12px;
    padding: 32px;
    width: 320px;
  }
</style>

<div class="overlay" id="overlay">
  <div class="modal">
    <h2>Atencao!</h2>
    <p>Conteudo do modal aqui.</p>
    <button onclick="fecharModal()">Fechar</button>
  </div>
</div>

<script>
  function fecharModal() {
    document.getElementById('overlay').style.display = 'none';
  }
</script>