Posicionamento Absoluto

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 57 de 76.

No CSS, o posicionamento absoluto permite que você coloque um elemento exatamente onde deseja dentro de seu contêiner.

Quando você define position: absolute;, o elemento é removido do layout normal, então outros elementos agem como se ele não estivesse lá. Ele se posiciona com base no ancestral mais próximo com uma posição definida (não static). Se não houver um, ele se posiciona em relação à página.

Aqui está a sintaxe básica para usar o posicionamento absoluto:

.parent {
    position: relative; /* Torna o elemento pai um ancestral posicionado */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent: O seletor CSS que visa o elemento pai. Definir position: relative; permite filhos posicionados de forma absoluta.

.child: O seletor CSS que define como alvo o elemento que você deseja posicionar de forma absoluta.

position: absolute;: Esta declaração define o esquema de posicionamento do elemento como absoluto, removendo-o do fluxo normal.

top, right, bottom, left: Estas propriedades especificam a posição do elemento em relação ao seu ancestral posicionado mais próximo. Você pode usar valores positivos ou negativos, especificados em pixels (px), ems (em), porcentagens (%) ou outras unidades CSS válidas.

Por exemplo:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

Neste exemplo, o elemento .parent é definido como um ancestral posicionado com position: relative;. O elemento .child é posicionado de forma absoluta com position: absolute;, e sua posição é definida como 50 pixels do topo e 100 pixels da esquerda de seu ancestral posicionado mais próximo (o elemento .parent).

Desafio

Fácil

Você recebeu um documento HTML com uma divisão pai (<div>) que contém duas divisões filhas (<div>) com as classes box1 e box2. Sua tarefa é usar o posicionamento absoluto para posicionar o elemento box2 dentro do parent. Siga os passos abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <div> com a classe parent. Defina sua propriedade position como relative para torná-lo um ancestral posicionado.
Escreva uma regra CSS que tenha como alvo o elemento <div> com a classe box2.
Defina a propriedade position do elemento .box2 como absolute.
Defina a propriedade top do elemento .box2 como 30px e a propriedade right como 20px. Isso posicionará a caixa a 30 pixels do topo e 20 pixels da direita de seu ancestral posicionado (o parent).

Folha de consulta

O posicionamento absoluto coloca um elemento exatamente onde você deseja dentro de seu contêiner. O elemento é removido do fluxo normal de layout e se posiciona com base no ancestral posicionado mais próximo.

Sintaxe básica:

.parent {
    position: relative; /* Torna o pai um ancestral posicionado */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

Exemplo:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

position: absolute; remove o elemento do fluxo normal
As propriedades top, right, bottom, left especificam a posição relativa ao ancestral posicionado mais próximo
Os valores podem ser em pixels (px), ems (em), porcentagens (%) ou outras unidades CSS
Se não existir nenhum ancestral posicionado, o elemento se posiciona em relação à página

Experimente você mesmo

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>