Colocar elementos de manera absoluta en CSS

Introducción

En este laboratorio, los estudiantes aprenderán a usar la colocación absoluta de CSS para controlar con precisión el diseño de los elementos de una página web. El laboratorio guía a los participantes a través del establecimiento de un entorno de proyecto, la descarga de imágenes, la creación de una estructura HTML y la aplicación de técnicas de colocación absoluta para manipular la colocación de las imágenes.

Los participantes comenzarán creando un directorio de proyecto estructurado, configurando una plantilla HTML5 y preparando un archivo CSS con estilos de restablecimiento básicos. A través de pasos prácticos, los aprendices explorarán cómo posicionar elementos independientemente del flujo normal del documento, adquiriendo habilidades prácticas en la creación de diseños web complejos y dinámicos utilizando la colocación absoluta de CSS.

Configurar el entorno del proyecto

En este paso, configurarás el entorno del proyecto para aprender la colocación absoluta de CSS. Crearemos un directorio de proyecto dedicado y prepararemos los archivos necesarios para nuestro laboratorio.

Primero, vamos a navegar hasta el directorio del proyecto y crear una carpeta nueva para nuestro proyecto de colocación de CSS:

cd ~/proyecto
mkdir css-positioning-lab
cd css-positioning-lab

Ahora, creemos la estructura básica del proyecto. Crearemos un archivo index.html y un directorio styles para organizar nuestros archivos CSS:

mkdir styles
touch index.html styles/main.css

Veamos la estructura del directorio:

tree

Salida de ejemplo:

.
├── index.html
└── styles
    └── main.css

Abra el archivo index.html en el WebIDE. Agregaremos una estructura básica de HTML5 para prepararnos para nuestro laboratorio de colocación de CSS:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Absolute Positioning Lab</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- Agregaremos contenido en los siguientes pasos -->
  </body>
</html>

Del mismo modo, abra el archivo styles/main.css y agregue un restablecimiento básico para eliminar el estilo predeterminado del navegador:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Estos pasos de configuración inicial crean un entorno limpio y organizado para nuestro laboratorio de colocación absoluta de CSS. En los siguientes pasos, descargaremos imágenes y comenzaremos a implementar nuestras técnicas de colocación.

Descargar las imágenes necesarias

En este paso, descargarás las imágenes que usaremos para demostrar la colocación absoluta de CSS. Crearemos un directorio images y descargaremos imágenes de muestra usando wget.

Primero, navega hasta el directorio del proyecto y crea una carpeta images:

cd ~/proyecto/css-positioning-lab
mkdir images
cd images

Ahora, descargemos algunas imágenes de muestra. Usaremos imágenes de marcador de posición de Lorem Picsum, que proporciona imágenes aleatorias con fines de demostración:

wget https://picsum.photos/200/300?random=1 -O image1.jpg
wget https://picsum.photos/200/300?random=2 -O image2.jpg
wget https://picsum.photos/200/300?random=3 -O image3.jpg

Veamos las imágenes descargadas:

ls -l

Salida de ejemplo:

total 180
-rw-r--r-- 1 labex labex 59973 Jun  1 10:00 image1.jpg
-rw-r--r-- 1 labex labex 61245 Jun  1 10:00 image2.jpg
-rw-r--r-- 1 labex labex 59678 Jun  1 10:00 image3.jpg

Verifica los tamaños de los archivos y confirma que se han descargado correctamente tres imágenes diferentes. Estas imágenes se usarán en los siguientes pasos para demostrar las técnicas de colocación absoluta en CSS.

Crear la estructura HTML

En este paso, crearás la estructura HTML para demostrar la colocación absoluta. Modificaremos el archivo index.html para incluir un contenedor con múltiples imágenes que posicionaremos de manera absoluta.

Abre el archivo index.html en el WebIDE y reemplaza su contenido con el siguiente código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Absolute Positioning Lab</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="positioning-container">
      <div class="image-wrapper">
        <img src="images/image1.jpg" alt="Imagen 1" class="positioned-image" />
        <img src="images/image2.jpg" alt="Imagen 2" class="positioned-image" />
        <img src="images/image3.jpg" alt="Imagen 3" class="positioned-image" />
      </div>
    </div>
  </body>
</html>

Ahora, actualiza el archivo styles/main.css para establecer el estilo básico para nuestra demostración de colocación:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.positioning-container {
  width: 500px;
  height: 500px;
  border: 2px solid #333;
  position: relative;
  margin: 50px auto;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.positioned-image {
  width: 200px;
  height: 300px;
  border: 2px solid rojo;
}

Analicemos la estructura HTML:

Hemos creado un div contenedor con la clase positioning-container
Dentro de él, tenemos un div image-wrapper
Se han agregado tres imágenes, cada una con la clase positioned-image

La CSS proporciona un ajuste básico:

El contenedor se establece en un tamaño fijo con un borde
position: relative se aplica al contenedor
Las imágenes tienen un tamaño fijo y un borde rojo para mayor visibilidad

Aplicar la colocación absoluta a las imágenes

En este paso, aprenderás a usar la colocación absoluta de CSS para colocar con precisión imágenes dentro de un contenedor. La colocación absoluta te permite posicionar elementos exactamente donde quieres, en relación con su ancestro posicionado más cercano.

Abre el archivo styles/main.css y modifica la CSS para aplicar la colocación absoluta a las imágenes:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.positioning-container {
  width: 500px;
  height: 500px;
  border: 2px solid #333;
  position: relative;
  margin: 50px auto;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.positioned-image {
  width: 200px;
  height: 300px;
  border: 2px solid rojo;
  position: absolute;
}

/* Colocación para imágenes individuales */
#image1 {
  top: 0;
  left: 0;
}

#image2 {
  top: 100px;
  right: 0;
}

#image3 {
  bottom: 0;
  left: 150px;
}

Ahora, actualiza el archivo index.html para agregar IDs únicos a las imágenes:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Absolute Positioning Lab</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="positioning-container">
      <div class="image-wrapper">
        <img
          src="images/image1.jpg"
          alt="Imagen 1"
          id="image1"
          class="positioned-image"
        />
        <img
          src="images/image2.jpg"
          alt="Imagen 2"
          id="image2"
          class="positioned-image"
        />
        <img
          src="images/image3.jpg"
          alt="Imagen 3"
          id="image3"
          class="positioned-image"
        />
      </div>
    </div>
  </body>
</html>

Puntos claves sobre la colocación absoluta:

position: absolute saca el elemento del flujo normal del documento
Se posiciona en relación con el ancestro posicionado más cercano (en este caso, el .positioning-container)
Las propiedades top, bottom, left y right controlan la colocación precisa
Cada imagen se posiciona de manera diferente para demostrar la flexibilidad de la colocación absoluta

Diseño de ejemplo:

La primera imagen (image1) se posiciona en la esquina superior izquierda
La segunda imagen (image2) se posiciona a 100px del borde superior, alineada a la derecha
La tercera imagen (image3) se posiciona en la parte inferior, a 150px de la izquierda

Verificar el diseño de colocación absoluta

En este último paso, verificará el diseño de colocación absoluta y comprenderá cómo se posicionan las imágenes dentro del contenedor. Abra el archivo index.html en un navegador web para ver el resultado de la colocación absoluta de CSS.

Revisemos los aspectos clave de la colocación absoluta que hemos implementado:

Colocación del contenedor

.positioning-container {
  position: relative; /* Crea un contexto de colocación */
  width: 500px;
  height: 500px;
}

Colocación de la imagen

.positioned-image {
  position: absolute; /* Saca las imágenes del flujo normal del documento */
  width: 200px;
  height: 300px;
}

#image1 {
  top: 0;
  left: 0;
} /* Esquina superior izquierda */
#image2 {
  top: 100px;
  right: 0;
} /* 100px desde la parte superior, alineada a la derecha */
#image3 {
  bottom: 0;
  left: 150px;
} /* Inferior, 150px desde la izquierda */

Observe cómo se posicionan las imágenes:

Cada imagen se coloca con precisión dentro del contenedor de 500x500px
Las imágenes no se superponen con los límites del contenedor
La colocación está controlada por las propiedades top, bottom, left y right

Para experimentar más, intente modificar los valores de colocación en la CSS para ver cómo afecta el diseño de las imágenes.

Resumen

En este laboratorio, los participantes aprenden los fundamentos de la colocación absoluta de CSS al configurar un entorno de desarrollo web estructurado. Los pasos iniciales consisten en crear un directorio de proyecto dedicado con una estructura de archivos clara, que incluye un archivo index.html y una carpeta styles, y aplicar un restablecimiento básico de CSS para garantizar un estilo coherente en diferentes navegadores.

El laboratorio guía a los aprendices a través de la creación de una configuración de proyecto limpia, la preparación de archivos HTML y CSS y la creación de una base para explorar las técnicas de colocación absoluta. Siguiendo pasos sistemáticos como la creación de directorios, la inicialización de archivos y la adición de configuraciones HTML y CSS iniciales, los participantes adquieren experiencia práctica en la organización de proyectos de desarrollo web y la preparación para técnicas avanzadas de diseño de CSS.