Conceptos básicos del posicionamiento

Parte de la sección Estilos con 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. De forma predeterminada, los elementos se posicionan según el flujo normal del documento HTML. Sin embargo, con el posicionamiento de CSS, puedes sacar los elementos del flujo normal y colocarlos en ubicaciones específicas en relación con su elemento contenedor o la ventana gráfica (el área visible de la ventana del navegador).

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

static: Este es el valor predeterminado. El elemento se posiciona según el flujo normal del documento. Las propiedades top, right, bottom y left no tienen ningún efecto.

relative: El elemento se posiciona en relación con su posición normal. Establecer las propiedades top, right, bottom y left alejará el elemento de su posición normal, pero seguirá ocupando espacio en el flujo normal.

absolute: El elemento se elimina del flujo normal y se coloca de forma relative a su ancestro más cercano con position (un ancestro con un valor de position distinto de static). Si no se encuentra ningún ancestro con position, se coloca de forma relative al bloque contenedor inicial (normalmente, la ventana gráfica).

fixed: El elemento se elimina del flujo normal y se posiciona en relación con la ventana gráfica. Permanece fijo en su lugar incluso cuando se desplaza la página.

Esta es 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 principal (<div>) que contiene una división secundaria (<div>). Tu tarea es usar la propiedad position para cambiar el contexto de posicionamiento de los elementos. Sigue los pasos siguientes:

Escribe una regla de CSS que seleccione el elemento <div> con la clase container. Establece su propiedad position en relative. Esto hará que sea un ancestro posicionado para sus elementos secundarios.
Escribe una regla de CSS que seleccione el 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á el cuadro a 50 píxeles de la parte superior y a 100 píxeles de la izquierda de su ancestro posicionado (el container).

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>