El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

El posicionamiento en CSS es una herramienta poderosa que permite controlar la disposición de los elementos en una página web. En esta lección, exploraremos las diferentes propiedades de posicionamiento: estático, relativo, absoluto y fijo. Entender cómo y cuándo usar cada una de estas propiedades es crucial para crear diseños web efectivos y flexibles.

Posicionamiento Estático

Definición

El posicionamiento estático es el valor por defecto para todos los elementos HTML. Los elementos con posicionamiento estático se colocan en el flujo normal del documento, es decir, se posicionan uno después del otro según el orden en el que aparecen en el HTML.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posicionamiento Estático</title>
    <style>
        .static-box {
            background-color: lightblue;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="static-box">Caja 1</div>
    <div class="static-box">Caja 2</div>
    <div class="static-box">Caja 3</div>
</body>
</html>

Explicación

En este ejemplo, las cajas se posicionan una después de la otra en el flujo del documento. No se ha aplicado ninguna propiedad position, por lo que el valor por defecto static se utiliza.

Posicionamiento Relativo

Definición

El posicionamiento relativo permite mover un elemento desde su posición original en el flujo del documento. Se utiliza la propiedad position: relative junto con las propiedades top, right, bottom y left para ajustar la posición del elemento.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posicionamiento Relativo</title>
    <style>
        .relative-box {
            position: relative;
            background-color: lightgreen;
            padding: 20px;
            margin: 10px;
            top: 20px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div class="relative-box">Caja Relativa</div>
</body>
</html>

Explicación

En este ejemplo, la caja se ha movido 20px hacia abajo y 30px hacia la derecha desde su posición original. Sin embargo, el espacio original que ocupaba la caja sigue reservado en el flujo del documento.

Posicionamiento Absoluto

Definición

El posicionamiento absoluto saca al elemento del flujo normal del documento y lo posiciona en relación a su contenedor posicionado más cercano (un contenedor con position: relative, position: absolute o position: fixed). Si no hay un contenedor posicionado, se posiciona en relación al elemento <html>.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posicionamiento Absoluto</title>
    <style>
        .container {
            position: relative;
            background-color: lightcoral;
            padding: 50px;
        }
        .absolute-box {
            position: absolute;
            background-color: lightyellow;
            padding: 20px;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        Contenedor
        <div class="absolute-box">Caja Absoluta</div>
    </div>
</body>
</html>

Explicación

En este ejemplo, la caja absoluta se posiciona 10px desde la parte superior y 10px desde la parte derecha del contenedor relativo. La caja absoluta no afecta el flujo del documento y se superpone a otros elementos.

Posicionamiento Fijo

Definición

El posicionamiento fijo saca al elemento del flujo normal del documento y lo posiciona en relación a la ventana del navegador. El elemento permanece en la misma posición incluso cuando se desplaza la página.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posicionamiento Fijo</title>
    <style>
        .fixed-box {
            position: fixed;
            background-color: lightpink;
            padding: 20px;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="fixed-box">Caja Fija</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna vitae nisi cursus tincidunt. Donec ac felis nec arcu fermentum volutpat. Integer nec libero nec arcu vehicula aliquet. Suspendisse potenti. Sed ut dui nec justo ultricies tincidunt. Cras ut libero euismod, tincidunt purus a, tincidunt arcu. Nam non bibendum libero. Integer vel magna nec libero tincidunt fermentum. Proin nec orci vel ligula vehicula tincidunt. Nulla facilisi. Sed sit amet ligula id libero facilisis dignissim. Donec nec eros nec nulla tincidunt fermentum. Sed ac libero nec ligula cursus facilisis. Duis ut ligula nec libero tincidunt fermentum.</p>
</body>
</html>

Explicación

En este ejemplo, la caja fija se posiciona en la esquina superior derecha de la ventana del navegador y permanece en esa posición incluso cuando se desplaza la página.

Ejercicio Práctico

Instrucciones

Crea una página HTML con tres cajas. Usa las propiedades de posicionamiento para lograr lo siguiente:

La primera caja debe estar en su posición estática por defecto.
La segunda caja debe estar posicionada relativamente, desplazada 50px hacia abajo y 50px hacia la derecha.
La tercera caja debe estar posicionada absolutamente dentro de un contenedor relativo, en la esquina inferior izquierda del contenedor.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio de Posicionamiento</title>
    <style>
        .static-box {
            background-color: lightblue;
            padding: 20px;
            margin: 10px;
        }
        .relative-box {
            position: relative;
            background-color: lightgreen;
            padding: 20px;
            margin: 10px;
            top: 50px;
            left: 50px;
        }
        .container {
            position: relative;
            background-color: lightcoral;
            padding: 50px;
            margin: 10px;
        }
        .absolute-box {
            position: absolute;
            background-color: lightyellow;
            padding: 20px;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="static-box">Caja Estática</div>
    <div class="relative-box">Caja Relativa</div>
    <div class="container">
        Contenedor
        <div class="absolute-box">Caja Absoluta</div>
    </div>
</body>
</html>

Conclusión

En esta lección, hemos aprendido sobre las diferentes propiedades de posicionamiento en CSS: estático, relativo, absoluto y fijo. Cada tipo de posicionamiento tiene su propio uso y es importante entender cómo y cuándo aplicarlos para crear diseños web efectivos. En la próxima lección, exploraremos la propiedad float y cómo se puede utilizar para crear diseños de página más complejos.

Posicionamiento Estático, Relativo, Absoluto y Fijo