Posicionamento Relativo

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

No CSS, o posicionamento relativo é um esquema de posicionamento que permite posicionar um elemento em relação à sua posição normal no fluxo do documento. Quando um elemento é definido como position: relative;, ele permanece no fluxo normal, mas você pode usar as propriedades top, right, bottom e left para deslocá-lo de sua posição original.

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

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: relative;: Esta declaração define o esquema de posicionamento do elemento como relativo.
top, right, bottom, left: Estas propriedades especificam o deslocamento do elemento em relação à sua posição normal. Você pode usar valores positivos ou negativos, especificados em pixels (px), ems (em), porcentagens (%) ou outras unidades CSS válidas.

Por exemplo:

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Neste exemplo, o elemento com a classe box será posicionado 20 pixels abaixo e 30 pixels à direita de sua posição normal no fluxo do documento. O espaço que ele ocupava originalmente será preservado e outros elementos não fluirão para esse espaço.

Desafio

Fácil

Você recebeu um documento HTML com uma divisão (<div>) que contém três divisões filhas (<div>) com as classes box1, box2 e box3. Sua tarefa é usar o posicionamento relativo para mover o elemento box2. Siga os passos abaixo:

Escreva uma regra CSS que selecione o elemento <div> com a classe box2.
Defina a propriedade position do elemento .box2 como relative.
Defina a propriedade top do elemento .box2 como 20px e a propriedade left como 40px. Isso moverá a caixa 20 pixels para baixo e 40 pixels para a direita de sua posição normal.

Folha de consulta

O posicionamento relativo permite que você posicione um elemento em relação à sua posição normal no fluxo do documento usando position: relative;:

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

O elemento permanece no fluxo normal, mas você pode deslocá-lo usando as propriedades top, right, bottom e left. O espaço original é preservado.

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Isso move o elemento 20px para baixo e 30px para a direita de sua posição normal.

Experimente você mesmo

<html>
<head>
    <title>Relative Positioning</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
        <div class="box3">Box 3</div>
    </div>
</body>
</html>