Html 5 – Capítulo 08 – Posicionamiento

En este capítulo, exploraremos en detalle el posicionamiento relativo y absoluto en HTML5 y CSS. Estas técnicas son esenciales para controlar la disposición de los elementos en una página web. A lo largo de este manual, te proporcionaré una explicación teórica completa y ejercicios resueltos para que puedas practicar y consolidar tus conocimientos.

Parte 1: Introducción al Posicionamiento en CSS

El posicionamiento en CSS se refiere a cómo los elementos HTML se sitúan en relación con otros elementos en la página. Las técnicas de posicionamiento relativo y absoluto son herramientas poderosas para lograr diseños precisos y complejos.

Posicionamiento Relativo

El posicionamiento relativo desplaza un elemento desde su posición original mientras mantiene el flujo normal de otros elementos. Se puede utilizar para ajustar ligeramente la posición de un elemento sin afectar su diseño global.

.relative-container {
    position: relative;
}

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

Posicionamiento Absoluto

El posicionamiento absoluto coloca un elemento en una posición específica dentro de su primer ancestro posicionado o del cuerpo principal. El elemento se retira del flujo normal, lo que significa que otros elementos pueden ocupar su espacio.

.absolute-container {
    position: relative;
}

.absolute-box {
    position: absolute;
    top: 50px;
    left: 100px;
}

Parte 2: Ejercicios Prácticos

Ejercicio 1: Posicionamiento Relativo

<div class="relative-container">
    <p>Este es un párrafo en posición normal.</p>
    <div class="relative-box">
        <p>Este párrafo tiene posición relativa.</p>
    </div>
</div>

.relative-container {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: lightgray;
    padding: 20px;
}

.relative-box {
    position: relative;
    top: 20px;
    left: 30px;
    background-color: coral;
    padding: 10px;
}

Ejercicio 2: Posicionamiento Absoluto

<div class="absolute-container">
    <div class="absolute-box">
        <p>Este párrafo tiene posición absoluta.</p>
    </div>
    <p>Este es otro párrafo en posición normal.</p>
</div>

.absolute-container {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: lightblue;
    padding: 20px;
}

.absolute-box {
    position: absolute;
    top: 50px;
    left: 100px;
    background-color: lightgreen;
    padding: 10px;
}

Parte 3: Conclusiones

El posicionamiento relativo y absoluto son técnicas esenciales para crear diseños web precisos y complejos. Con el posicionamiento relativo, puedes ajustar la posición de elementos sin interrumpir el flujo normal de la página. El posicionamiento absoluto te permite colocar elementos de manera precisa y controlada en relación con su contenedor posicionado.