Fondo Elemento A Elemento B Elemento C
/* Estilos básicos para el cuerpo y eliminar márgenes por defecto */ body { margin: 0; padding: 0; display: flex; /* Centra el contenedor principal */ justify-content: center; align-items: center; min-height: 100vh; /* Ocupa al menos la altura completa de la ventana */ background-color: #f0f0f0; /* Color de fondo del sitio */ } /* 1. Contenedor principal: Necesita 'position: relative' */ .composicion-contenedor { position: relative; /* CLAVE: Los elementos internos se posicionarán con respecto a este */ width: 800px; /* Define el ancho de tu composición (ajusta este valor) */ height: 600px; /* Define la altura de tu composición (ajusta este valor) */ overflow: hidden; /* Oculta cualquier cosa que se salga de estos límites */ } /* 2. Estilo base para todas las imágenes en la composición */ .imagen-composicion { position: absolute; /* CLAVE: Permite mover y superponer las imágenes */ /* Por defecto, hacemos que todas las imágenes cubran el 100% del contenedor */ width: 100%; height: 100%; object-fit: cover; /* Ajusta la imagen para que cubra el área sin distorsionarla */ top: 0; left: 0; } /* 3. Posicionamiento y ajustes individuales (Aquí personalizas la composición) */ /* El fondo generalmente se queda donde está, pero le damos el z-index más bajo */ .fondo { z-index: 1; /* Esto asegura que esté en la capa de más abajo */ } /* Elemento A: Lo movemos y ajustamos su tamaño */ .elemento-a { z-index: 5; /* Lo ponemos encima del fondo */ width: 40%; /* Hacemos que sea más pequeño */ height: auto; top: 50px; /* Lo bajamos 50px desde arriba */ left: 50px; /* Lo movemos 50px desde la izquierda */ opacity: 0.8; /* Lo hacemos un poco transparente */ } /* Elemento B: Lo movemos a otra posición */ .elemento-b { z-index: 10; /* Lo ponemos encima del Elemento A (está en la capa más alta) */ width: 50%; height: auto; bottom: 20px; /* Lo subimos 20px desde abajo */ right: 20px; /* Lo movemos 20px desde la derecha */ } /* Elemento C: Un pequeño detalle */ .elemento-c { z-index: 8; width: 200px; height: auto; top: 0; right: 0; }