Conceptos básicos de posicionamiento

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

En CSS, el posicionamiento es un conjunto de propiedades que te permiten controlar la posición de los elementos en una página web. Por defecto, los elementos se posicionan de acuerdo con el flujo normal del documento HTML. Sin embargo, con el posicionamiento CSS, puedes sacar elementos del flujo normal y colocarlos en ubicaciones específicas en relación con su elemento contenedor o el viewport (el área visible de la ventana del navegador).

Existen varios valores para la propiedad position, cada uno con su propio comportamiento:

static: Este es el valor predeterminado. El elemento se posiciona de acuerdo con el flujo normal del documento. Las propiedades top, right, bottom y left no tienen efecto.

relative: El elemento se posiciona de forma relativa a su posición normal. Al establecer las propiedades top, right, bottom y left, el elemento se desplazará de su posición normal, pero seguirá ocupando espacio en el flujo normal.

absolute: El elemento se elimina del flujo normal y se posiciona de forma relativa a su ancestro posicionado más cercano (un ancestro con una posición distinta de static). Si no se encuentra ningún ancestro posicionado, se posiciona de forma relativa al bloque de contención inicial (normalmente el viewport).

fixed: El elemento se elimina del flujo normal y se posiciona de forma relativa a la ventana de visualización (viewport). Permanece fijo en su lugar incluso cuando se desplaza la página.

Aquí está la sintaxis básica para usar la propiedad position:

selector {
    position: value;
}

value: El comportamiento de posicionamiento deseado (por ejemplo, static, relative, absolute, fixed, sticky).

Desafío

Fácil

Se te proporciona un documento HTML con una división padre (<div>) que contiene una división hija (<div>). Tu tarea es usar la propiedad position para cambiar el contexto de posicionamiento de los elementos. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <div> con la clase container. Establece su propiedad position en relative. Esto lo convertirá en un ancestro posicionado para sus hijos.
Escribe una regla CSS que apunte al elemento <div> con la clase box. Establece su propiedad position en absolute. Esto lo sacará del flujo normal y te permitirá posicionarlo en relación con su ancestro posicionado más cercano (el container).
Establece la propiedad top del elemento .box en 50px y la propiedad left en 100px. Esto posicionará la caja a 50 píxeles de la parte superior y a 100 píxeles de la izquierda de su ancestro posicionado (el container).

Hoja de referencia

La propiedad position controla cómo se posicionan los elementos en una página web:

selector {
    position: value;
}

Valores de posición:

static: Posicionamiento predeterminado en el flujo normal del documento
relative: Posicionado en relación con su posición normal, todavía ocupa espacio en el flujo
absolute: Eliminado del flujo normal, posicionado en relación con el ancestro posicionado más cercano
fixed: Eliminado del flujo normal, posicionado en relación con la ventana gráfica (viewport), permanece fijo al desplazarse

Usa las propiedades top, right, bottom y left para ajustar la posición (excepto con static).

Pruébalo tú mismo

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>