¿Alguna vez has querido colocar una imagen encima de otra sin tocar el HTML? Aquí aprenderás a superponer elementos en CSS usando position absolute y relative, una técnica clave para construir secciones tipo hero donde el contenido flota sobre un fondo. Es ideal si estás dando tus primeros pasos con maquetación web.

La idea es sencilla: tu HTML mantiene su flujo natural de arriba hacia abajo, pero CSS te permite generar una especie de lienzo transparente encima del lienzo principal del navegador. Sobre ese nuevo lienzo puedes colocar lo que quieras, las veces que quieras.

¿Cómo se estructura un hero con elementos encimados?

Dentro de la section hero convive una imagen de computadora que actúa como fondo y un contenedor con la foto de perfil más la descripción personal. Ambos están al mismo nivel en el HTML, así que el truco para que uno quede encima del otro vive completamente en CSS [01:05].

Lo primero es asegurar que la imagen de fondo ocupe todo el ancho disponible. Para eso, al selector #hero #computadora se le aplica display: inline-block y width: 100%. Con esto la imagen no se comporta de forma rara y abarca el 100% del navegador [02:30].

¿Para qué sirve display inline-block en una imagen? Permite tratar el contenedor de la imagen con más libertad, como si fuera un bloque, pero conservando comportamiento en línea. Así puedes asignarle ancho y alto sin restricciones extrañas.

¿Qué hace position absolute y por qué despega el elemento?

Al seleccionar #hero .informacion-contenedor y aplicarle position: absolute, junto con top: 0 y left: 0, ocurre algo interesante: el contenedor se despega del flujo normal del documento y se pega al inicio absoluto de la página [03:45].

Eso significa que, sin más instrucciones, el contenedor se ubica desde el primer píxel del navegador, encimándose con el header y todo lo demás. Si vas aumentando los valores de top o left, el elemento se mueve esa cantidad de píxeles desde la esquina superior izquierda.

La metáfora útil es esta: position absolute genera un nuevo lienzo transparente encima del lienzo del navegador y ahí coloca tu elemento. El HTML sigue ordenado como siempre; solo CSS aplica el truco visual.

¿Cómo limito la posición con position relative en el padre?

Para que el contenedor no se pegue al inicio del navegador sino al inicio del hero, basta con darle al #hero la propiedad position: relative. Con eso le dices al hijo absoluto: "busca tu referencia aquí, no en toda la página" [05:20].

• position: relative en el padre define el punto de referencia.
• position: absolute en el hijo lo despega y lo ancla a ese padre.
• top y left ajustan la posición exacta dentro de ese marco.

Esta combinación es la base de cualquier superposición controlada en CSS. Sin el relative en el padre, el hijo absoluto se va al rincón superior del documento.

¿Cuál es la diferencia entre position absolute y relative? Relative mantiene el elemento en su flujo normal pero lo convierte en referencia para hijos absolutos. Absolute saca al elemento del flujo y lo posiciona respecto al ancestro relative más cercano.

¿Cómo ajusto la foto de perfil dentro del hero?

La foto venía enorme porque heredaba el tamaño completo. Para reducirla, se accede a #hero .informacion-contenedor .foto y se le asigna width: 200px. Con eso la foto pasa a un tamaño manejable y deja ver el texto que la acompaña [06:50].

Después, para darle ese aspecto circular tan típico de los perfiles, se selecciona la imagen interna con #hero .informacion-contenedor .foto img y se le aplica border-radius: 100%. La foto queda redondita y lista para integrarse al diseño.

• width: 200px controla el tamaño del contenedor de la foto.
• border-radius: 100% redondea la imagen real.
• Selectores anidados ayudan a mantener el CSS organizado por sección.

Mantener los selectores anidados como #hero .informacion-contenedor .foto no es obligatorio, pero te ayuda a saber exactamente sobre qué parte del layout estás trabajando.

¿Qué falta después de encimar los elementos?

Ya tienes la técnica para colocar contenido sobre un fondo, pero el resultado todavía se ve crudo. La imagen está pegada al borde izquierdo, los textos no tienen color definido y faltan separaciones entre la foto y la información personal.

El siguiente paso es trabajar márgenes, colores y la disposición horizontal entre foto y descripción. Lo importante es que ya dominas la pieza central: HTML mantiene su orden, CSS encima los lienzos que tú quieras.

¿Te ha pasado que intentas usar position: absolute y el elemento se va a un lugar inesperado? Cuéntame en los comentarios dónde estás aplicando esta técnica.