DS & II

capitulo_16_position

Leitura de 3 min

Capítulo 16: Posições no Campo de Batalha (Position) 📍🛡️

Neste capítulo, vamos aprender a mover os elementos pela tela e fixá-los em lugares específicos, usando o tema Táticas de Posicionamento!

📖 A Propriedade position

Por padrão, os elementos do HTML seguem uma ordem natural (um embaixo do outro). Mas com a propriedade position, podemos mudar isso:

  • position: static;: O padrão. Segue o fluxo normal.
  • position: relative;: O elemento pode ser movido em relação à sua posição original (usando top, bottom, left, right).
  • position: absolute;: O elemento “flutua” e se posiciona em relação ao elemento pai mais próximo que tenha position: relative.
  • position: fixed;: O elemento fica grudado na tela, mesmo que você role a página (ótimo para menus ou botões de chat).

📖 Exemplo Guiado: O Menu Fixo

Vamos criar um cabeçalho que fica sempre no topo.

  1. Crie o arquivo posicao.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Posicionamento</title>
    <link rel="stylesheet" href="posicao.css">
</head>
<body>
    <header class="menu-fixo">
        <h1>Menu do Reino</h1>
    </header>
    
    <main>
        <p>Muito texto aqui...</p>
        <p>Role a página para ver o menu fixo!</p>
        <!-- Repita os parágrafos para criar rolagem -->
    </main>
</body>
</html>
  1. Crie o arquivo posicao.css:
body {
    margin: 0;
    padding-top: 80px; /* Espaço para o menu não cobrir o texto */
}
 
.menu-fixo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    color: white;
    text-align: center;
    height: 60px;
}

📊 Ilustração Visual: Tipos de Position

graph TD
    A[Position] --> B[Relative: Move do lugar original]
    A --> C[Absolute: Flutua no pai]
    A --> D[Fixed: Gruda na tela]

🛠️ Prática Obrigatória 1: Botão Flutuante

Crie um arquivo chamado botao_fixo.html e o CSS. Crie um botão (ou div) com a classe ajuda. Use position: fixed para deixá-lo no canto inferior direito da tela (bottom: 20px e right: 20px)!

🔑 Gabarito de Código

Prática 1: botao_fixo.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Botão Fixo</title>
    <link rel="stylesheet" href="botao.css">
</head>
<body>
    <h1>Role a página</h1>
    <div class="ajuda">?</div>
</body>
</html>

botao.css

.ajuda {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: green;
    color: white;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px; /* Centraliza o texto verticalmente */
    border-radius: 50%; /* Faz ficar redondo */
    font-weight: bold;
}

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo X) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.
  3. ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
  4. No Microsoft Teams:
    • Copie o link do seu repositório.
    • Cole na tarefa correspondente no Teams.
    • Clique em Entregar.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks