Posicionamiento absoluto

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

En CSS, el posicionamiento absoluto te permite colocar un elemento exactamente donde quieras dentro de su contenedor.

Cuando estableces position: absolute;, el elemento se elimina del flujo normal del diseño, por lo que otros elementos actúan como si no estuviera allí. Se posiciona basándose en el ancestro más cercano con una posición establecida (que no sea static). Si no hay ninguno, se posiciona de forma relativa a la página.

Aquí está la sintaxis básica para usar el posicionamiento absoluto:

.parent {
    position: relative; /* Hacer que el padre sea un ancestro posicionado */
}

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

.parent: El selector CSS que apunta al elemento padre. Establecer position: relative; permite elementos hijos posicionados de forma absoluta.

.child: El selector CSS que apunta al elemento que deseas posicionar de forma absoluta.

position: absolute;: Esta declaración establece el esquema de posicionamiento del elemento como absoluto, eliminándolo del flujo normal.

top, right, bottom, left: Estas propiedades especifican la posición del elemento en relación con su ancestro posicionado más cercano. Puedes usar valores positivos o negativos, especificados en píxeles (px), ems (em), porcentajes (%) u otras unidades CSS válidas.

Por ejemplo:

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

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

En este ejemplo, el elemento .parent se establece como un ancestro posicionado con position: relative;. El elemento .child se posiciona de forma absoluta con position: absolute;, y su posición se establece a 50 píxeles desde la parte superior y 100 píxeles desde la izquierda de su ancestro posicionado más cercano (el elemento .parent).

Desafío

Fácil

Se te proporciona un documento HTML con una división padre (<div>) que contiene dos divisiones hijas (<div>) con las clases box1 y box2. Tu tarea es utilizar el posicionamiento absoluto para ubicar el elemento box2 dentro del parent. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <div> con la clase parent. Establece su propiedad position en relative para convertirlo en un ancestro posicionado.
Escribe una regla CSS que apunte al elemento <div> con la clase box2.
Establece la propiedad position del elemento .box2 en absolute.
Establece la propiedad top del elemento .box2 en 30px y la propiedad right en 20px. Esto posicionará la caja a 30 píxeles de la parte superior y a 20 píxeles de la derecha de su ancestro posicionado (el parent).

Hoja de referencia

El posicionamiento absoluto coloca un elemento exactamente donde desees dentro de su contenedor. El elemento se elimina del flujo normal del diseño y se posiciona basándose en el ancestro posicionado más cercano.

Sintaxis básica:

.parent {
    position: relative; /* Make the parent a positioned ancestor */
}

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

Ejemplo:

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

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

position: absolute; elimina el elemento del flujo normal
Las propiedades top, right, bottom, left especifican la posición relativa al ancestro posicionado más cercano
Los valores pueden estar en píxeles (px), ems (em), porcentajes (%) u otras unidades de CSS
Si no existe un ancestro posicionado, el elemento se posiciona en relación con la página

Pruébalo tú mismo

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