Estoy buscando el método CSS adecuado para superponer div de imágenes sobre otra div de imágenes (no de fondo) sin usar position:absolute. Alguien sabe cómo hacer esto?Cómo superponer imágenes sin usar la posición: ¿absoluta?
position: absolute no es "incorrecto" - ¡es parte de las especificaciones de CSS! No hay otra manera de poner elementos sobre otros elementos, a menos que se faff con position: relative o tal vez algunas propiedades float.
position: absolute es la forma más fácil de hacerlo. ¿Qué te hace pensar que es una mala idea?
La única otra solución es utilizar una imagen dentro de un div con un fondo, como esto:
<div>
<img src="...">
</div>
a continuación, dar el div un background-image:
div
{
background: url(/images/foo.png) no-repeat;
}
Sin embargo, para múltiples imágenes Definitivamente me quedaría con position: absolute.
Hay muy demo glitchy here que demuestra el efecto.
como se menciona en la publicación original, no se puede tratar con fondo dentro de div, y de acuerdo con la posición: absoluto es más fácil, pero no es ideal para diseño receptivo –
Se puede superponer/superponen elementos en uno encima del otro utilizando un margen negativo. Ejemplo:
#b{
margin-left:-10px;
}
Esto moverá el elemento de b al 10px izquierdo, superposición de lo que es, a la izquierda de ella (suponiendo que se trata de un display: elemento de tipo de bloque, no una línea, como un lapso).
90% de las veces, los márgenes negativos son una mala idea. Algunos navegadores tienen errores con ellos y no cambian el "espacio establecido" que está reservado para el objeto original. Sé que OP pidió ideas, pero recomendaría que usen 'position: absolute;' sobre los márgenes negativos. – jfriend00
@ jfriend00 Estoy de acuerdo, pero "sin usar la posición: absoluto" es la parte esencial de la pregunta. –
Estaba respondiendo por el beneficio del OP. No creo que haya una mejor opción que el posicionamiento absoluto para objetos superpuestos. Ayudaría si explicaran por qué están tratando de evitar el posicionamiento absoluto. Sospecho que no entienden cómo usar 'position: relative' en el padre. – jfriend00
¿Por qué no puedes usar 'position: absolute'? –
'posición: absolute' combinado con' position: relative' en un elemento primario es una muy buena manera de superponer dos objetos conservando el diseño de la página en general. Crea un contenedor independiente que se puede desplegar con el modelo de cuadro HTML normal, pero dentro del contenedor, usa la posición para crear superposición. – jfriend00
Realmente necesita explicar por qué está tratando de evitar 'position: absolute' porque probablemente sea la mejor solución y probablemente haya maneras de resolver lo que sea que esté preocupado con ella. – jfriend00