Aplicar la colocación relativa en CSS

Introducción

En este laboratorio, aprenderá a aplicar la colocación relativa en CSS creando una disposición web con dos imágenes. El laboratorio lo guía a través de la configuración de una estructura de proyecto HTML, la creación de una hoja de estilos CSS básica y la implementación de técnicas de colocación relativa para la colocación de imágenes.

Comenzará creando un directorio de proyecto, inicializando un archivo HTML con marcadores de posición de imágenes y descargando imágenes de muestra. Luego, desarrollará una hoja de estilos CSS para definir la disposición y la colocación de estas imágenes utilizando la colocación relativa, lo que le permite ajustar la posición de los elementos con respecto a su flujo normal de documento sin afectar a los diseños de otros elementos.

Configurar la estructura del proyecto HTML

En este paso, configurará la estructura básica del proyecto HTML para aprender la colocación relativa en CSS. Crearemos un directorio de proyecto simple e inicializaremos los archivos necesarios para nuestro experimento de disposición web.

Primero, navegue hasta el directorio del proyecto:

cd ~/proyecto

Cree un nuevo directorio para nuestro proyecto de colocación en CSS:

mkdir css-posicionamiento
cd css-posicionamiento

Ahora, cree los archivos básicos del proyecto utilizando el WebIDE:

Cree un archivo HTML llamado index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Colocación relativa en CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <img src="left-image.jpg" alt="Imagen izquierda" class="left-image" />
      <img src="right-image.jpg" alt="Imagen derecha" class="right-image" />
    </div>
  </body>
</html>

Descargue imágenes de muestra para el proyecto:

wget https://labex.io/sample-left-image.jpg -O left-image.jpg
wget https://labex.io/sample-right-image.jpg -O right-image.jpg

Salida de ejemplo:

--2024-xx-xx xx:xx:xx--  https://labex.io/sample-left-image.jpg
Resolviendo labex.io (labex.io)...
Descargando imágenes de muestra...

Esta configuración crea una estructura HTML básica con marcadores de posición para las imágenes y prepara el proyecto para experimentos de colocación en CSS en los siguientes pasos.

Crear una hoja de estilos CSS básica

En este paso, creará una hoja de estilos CSS básica para establecer los estilos fundamentales de su página web. CSS (Hojas de Estilos en Cascada) le permite controlar la disposición, la apariencia y la colocación de los elementos HTML.

Navegue hasta el directorio del proyecto:

cd ~/proyecto/css-posicionamiento

Cree un nuevo archivo CSS llamado styles.css en el WebIDE:

/* Reinicio básico y estilos del contenedor */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
  position: relative;
  border: 2px solid #333;
  padding: 20px;
}

/* Estilos iniciales de las imágenes */
.left-image,
.right-image {
  width: 200px;
  height: auto;
  border: 1px solid #666;
}

Analicemos el CSS:

El selector * aplica un reinicio para eliminar los márgenes y rellenos predeterminados
.container crea un contenedor centrado con un borde
.left-image y .right-image establecen los tamaños iniciales de las imágenes y agregan un borde

Salida de ejemplo al visualizar en un navegador:

[Un contenedor centrado con un borde, que contiene dos imágenes de tamaño igual]

Esta hoja de estilos básica proporciona la base para nuestro experimento de colocación relativa. En los siguientes pasos, modificaremos estos estilos para demostrar técnicas de colocación relativa.

Implementar la colocación relativa para la imagen izquierda

En este paso, aprenderá a utilizar la colocación relativa para mover la imagen izquierda dentro de su flujo de documento original. La colocación relativa le permite ajustar la posición de un elemento con respecto a su posición normal sin afectar a otros elementos.

Abra el archivo styles.css en el WebIDE y agregue el siguiente CSS para la imagen izquierda:

.left-image {
  position: relative;
  top: 20px; /* Mueva 20 píxeles hacia abajo */
  left: 50px; /* Mueva 50 píxeles hacia la derecha */
  background-color: #f0f0f0; /* Agregue un fondo claro para mayor visibilidad */
}

Puntos clave sobre la colocación relativa:

position: relative; habilita la colocación relativa
top mueve el elemento hacia abajo
left mueve el elemento hacia la derecha
El espacio original del elemento se conserva
Otros elementos no se ven afectados por este movimiento

Salida visual de ejemplo:

[Imagen izquierda desplazada 20px hacia abajo y 50px hacia la derecha,
 manteniendo su espacio de diseño original]

La colocación relativa le permite ajustar con precisión la colocación de los elementos sin alterar el diseño general de la página.

Implementar la colocación relativa para la imagen derecha

En este paso, aplicará la colocación relativa a la imagen derecha, demostrando cómo mover elementos de manera independiente utilizando CSS. Utilizaremos diferentes valores de colocación para mostrar la flexibilidad de la colocación relativa.

Abra el archivo styles.css en el WebIDE y agregue el siguiente CSS para la imagen derecha:

.right-image {
  position: relative;
  bottom: 30px; /* Mueva 30 píxeles hacia arriba */
  right: -40px; /* Mueva 40 píxeles hacia la izquierda */
  background-color: #e0e0e0; /* Agregue un fondo claro para mayor visibilidad */
}

Diferencias clave en la colocación:

bottom mueve el elemento hacia arriba
right con un valor negativo mueve el elemento hacia la izquierda
La imagen mantiene su espacio de diseño original
Otros elementos no se ven afectados por este movimiento

Salida visual de ejemplo:

[Imagen derecha desplazada 30px hacia arriba y 40px hacia la izquierda,
 manteniendo su espacio de diseño original]

Este ejemplo demuestra cómo puede utilizar diferentes propiedades de colocación para ajustar con precisión la colocación de los elementos utilizando la colocación relativa.

Verificar la colocación y el diseño

En este último paso, revisará y verificará las técnicas de colocación relativa aplicadas a las imágenes. Agregaremos algunos toques finales para mejorar la comprensión visual de cómo funciona la colocación relativa.

Actualice el archivo styles.css con un estilo completo para resaltar la colocación:

.container {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
  position: relative;
  border: 2px solid #333;
  padding: 20px;
  text-align: center;
}

.left-image,
.right-image {
  width: 200px;
  height: auto;
  border: 3px solid #666;
  transition: transform 0.3s ease;
}

.left-image {
  position: relative;
  top: 20px;
  left: 50px;
  background-color: #f0f0f0;
}

.right-image {
  position: relative;
  bottom: 30px;
  right: -40px;
  background-color: #e0e0e0;
}

/* Agregue un efecto al pasar el cursor para visualizar la colocación */
.left-image:hover,
.right-image:hover {
  transform: scale(1.05);
}

Puntos clave de verificación:

Las imágenes se colocan con respecto a sus ubicaciones originales
El contenedor mantiene un diseño consistente
Los efectos al pasar el cursor ayudan a visualizar la colocación

Salida visual de ejemplo:

[Dos imágenes colocadas de manera diferente dentro de un contenedor centrado,
 con efectos sutiles al pasar el cursor para resaltar sus posiciones]

Este estilo final demuestra el poder de la colocación relativa para crear diseños flexibles y dinámicos.

Resumen

En este laboratorio, los participantes aprendieron cómo aplicar la colocación relativa de CSS creando un proyecto web estructurado desde cero. El proceso implicó configurar un directorio de proyecto HTML, crear un archivo index.html con marcadores de posición de imágenes y descargar imágenes de muestra para demostrar técnicas de colocación.

El laboratorio guió a los aprendices a través de la creación de una hoja de estilos CSS básica, estableciendo principios de estilo fundamental y preparando los cimientos para implementar la colocación relativa para las imágenes izquierda y derecha. Siguiendo las instrucciones paso a paso, los participantes adquirieron experiencia práctica en la gestión de elementos de diseño web y en la comprensión de cómo se puede utilizar la colocación de CSS para controlar la colocación de imágenes dentro de un contenedor.