¿Cómo puedo superponer un texto sobre una imagen usando posicionamiento CSS?

Para superponer un texto sobre una imagen utilizando posicionamiento CSS, la técnica más común y flexible implica el uso de position: relative en un elemento contenedor y position: absolute para el elemento de texto que deseas superponer.

1. Estructura HTML:
   Necesitarás un elemento contenedor que contenga tanto la imagen (<img>) como el texto que quieres superponer.
   <div class="contenedor-imagen">
<img src="ruta/a/tu/imagen.jpg" alt="Descripción de la imagen">
<div class="texto-encima">
<h2>Título Superpuesto</h2>
<p>Este texto está sobre la imagen.</p>
</div>
</div>
2. Estilos CSS:
   • Contenedor Padre (.contenedor-imagen):
     • Se le asigna position: relative;. Esto es crucial porque establece el contexto de posicionamiento para cualquier elemento hijo que tenga position: absolute;. El texto se posicionará en relación a este contenedor.
     • Es buena idea darle display: inline-block; o display: block; si necesitas que contenga las dimensiones de la imagen correctamente.
   • Imagen (img):
     • A menudo se le da display: block; para eliminar cualquier espacio extra debajo de ella (ya que las imágenes son inline por defecto) y max-width: 100%; height: auto; para que sea adaptable.
   • Texto superpuesto (.texto-encima):
     • Se le asigna position: absolute;.
     • Luego, utilizas las propiedades top, right, bottom, y left para posicionar el bloque de texto exactamente donde lo deseas dentro de los límites del .contenedor-imagen. Por ejemplo, para centrarlo.
     • A menudo se usa z-index si hay múltiples elementos superpuestos, aunque si el texto está después de la imagen en el DOM y ambos están dentro del mismo contexto de apilamiento creado por el padre relativo, el texto normalmente aparecerá encima.

Ejemplo CSS:

.contenedor-imagen {
  position: relative; /* Establece el contexto de posicionamiento */
  display: inline-block; /* Ajusta el contenedor al tamaño de la imagen si es necesario */
  /* O width: deseado; si la imagen es un fondo o tiene dimensiones específicas */
}

.contenedor-imagen img {
  display: block; /* Para un mejor control del layout de la imagen */
  max-width: 100%; /* Hace la imagen adaptable */
  height: auto;
}

.texto-encima {
  position: absolute; /* Posiciona el texto con respecto a .contenedor-imagen */
  top: 50%;           /* Lo lleva al 50% desde arriba */
  left: 50%;          /* Lo lleva al 50% desde la izquierda */
  transform: translate(-50%, -50%); /* Centra el texto exactamente */
  
  color: white; /* Asegúrate de que el color del texto contraste con la imagen */
  text-align: center; /* Centra el texto dentro de su propio bloque */
  padding: 10px;
  /* background-color: rgba(0, 0, 0, 0.5); Opcional: un fondo semitransparente para el texto */
  /* text-shadow: 1px 1px 2px black; Opcional: sombra de texto para legibilidad */
}Lenguaje del código: PHP (php)

Alternativa con background-image:

Si la imagen es un background-image del contenedor (en lugar de una etiqueta <img>), entonces cualquier contenido de texto que sea hijo directo de ese contenedor ya estará naturalmente «encima» del fondo.

En ese caso, solo necesitarías usar position: absolute; en el texto si quieres un posicionamiento muy específico dentro del contenedor, o podrías usar Flexbox o Grid en el contenedor para alinear el texto.

Asegúrate siempre de que el texto superpuesto tenga suficiente contraste con la imagen de fondo para garantizar una buena legibilidad.