Posicionamiento relativo

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 56 de 76.

En CSS, el posicionamiento relativo es un esquema de posicionamiento que le 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 luego puede usar las propiedades top, right, bottom y left para desplazarlo de su posición original.

Aquí está 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 desde 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. El espacio que ocupaba originalmente se preservará y otros elementos no fluirán hacia ese espacio.

Desafío

Fácil

Se te proporciona un documento HTML con una división (<div>) que contiene tres divisiones hijas (<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 CSS que apunte al elemento <div> con la clase box2.
Establece la propiedad position del elemento .box2 a relative.
Establece la propiedad top del elemento .box2 a 20px y la propiedad left a 40px. Esto moverá la caja 20 píxeles hacia abajo y 40 píxeles a la derecha de su posición normal.

Hoja de referencia

El posicionamiento relativo le permite posicionar un elemento en relación con su posición normal en el flujo del documento utilizando position: relative;:

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

El elemento permanece en el flujo normal, pero puede desplazarlo utilizando las propiedades top, right, bottom y left. El espacio original se conserva.

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

Esto mueve el elemento 20px hacia abajo y 30px hacia la derecha desde 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>