Posicionamiento relativo

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 56 de 76.

En CSS, el posicionamiento relativo es un esquema de posicionamiento que permite posicionar un elemento en relación con su posición normal en el flujo del documento. Cuando un elemento se establece en position: relative;, permanece en el flujo normal, pero después puedes usar las propiedades top, right, bottom y left para desplazarlo de su posición original.

Esta es la sintaxis básica para usar el posicionamiento relativo:

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

position: relative;: Esta declaración establece el esquema de posicionamiento del elemento como relativo.
top, right, bottom, left: Estas propiedades especifican el desplazamiento del elemento con respecto a su posición normal. Puedes usar valores positivos o negativos, especificados en píxeles (px), ems (em), porcentajes (%) u otras unidades CSS válidas.

Por ejemplo:

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

En este ejemplo, el elemento con la clase box se posicionará 20 píxeles hacia abajo y 30 píxeles a la derecha de su posición normal en el flujo del documento. Se conservará el espacio que ocupaba originalmente y los demás elementos no ocuparán ese espacio.

Desafío

Fácil

Se te proporciona un documento HTML con una división (<div>) que contiene tres divisiones secundarias (<div>) con las clases box1, box2 y box3. Tu tarea es utilizar el posicionamiento relativo para mover el elemento box2. Sigue los pasos a continuación:

Escribe una regla de CSS que seleccione el elemento <div> con la clase box2.
Establece la propiedad position del elemento .box2 en relative.
Establece la propiedad top del elemento .box2 en 20px y la propiedad left en 40px. Esto moverá la caja 20 píxeles hacia abajo y 40 píxeles hacia la derecha de su posición normal.

Pruébalo tú mismo

<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>