Elementos superpuestos en CSS

¿Cómo puedo hacer que dos elementos se superpongan en CSS, p. Ej.Elementos superpuestos en CSS

<div>Content 1</div> 
<div>Content 2</div>

Me gustaría que los dos contenidos (que puede ser cualquier cosa) a superponerse, por lo contenido 2 sólo se muestra a partir de la misma esquina superior izquierda como contenido 1 y que aparecen solapados. El contenido 1 debe comenzar en el flujo normal del documento y no en una posición fija en la pantalla.

¿Esto es posible?

Gracias,

Fuente

2010-01-08 AJ.

Parece algo que se puede hacer con el posicionamiento. ¿Tienes algún sitio de referencia? –

la forma más fácil es usar position:absolute en ambos elementos. Puede absolutamente posición con respecto a la página, o puede absolutamente posición relativa a un contenedor div estableciendo el div contenedor para position:relative

<div id="container" style="position:relative;"> 
    <div id="div1" style="position:absolute; top:0; left:0;"></div> 
    <div id="div2" style="position:absolute; top:0; left:0;"></div> 
</div>

Fuente

2010-01-08 13:03:07 fearofawhackplanet

+12

En realidad, no necesita la 'posición: absoluta' en ambos elementos. Si uno está absolutamente posicionado en (0,0), se superpondrá al otro de todos modos). El problema es que las dimensiones del elemento de posición absoluta no se tienen en cuenta en el diseño de la página. –

Muchas gracias por esto. –

Muchas gracias, incluso si esta respuesta tiene 4 años, sigue siendo útil. Sangro 'Leer, Escribir y CSS' todos los días, pero aun así me olvido de establecer a veces la posición del elemento padre para asegurar que los elementos secundarios no se posicionen de acuerdo con los abuelos. –

Creo que se podría salir con el uso de posicionamiento relativo y luego fijar la parte superior/izquierda posicionamiento de la segunda DIV hasta que la tenga en la posición deseada.

Fuente

2010-01-08 13:07:28 James

Muchas gracias por esto. –

Puede usar el posicionamiento relativo para superponer sus elementos. Sin embargo, el espacio que normalmente ocupan todavía será reservado para el elemento:

<div style="background-color:#f00;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 
<div style="background-color:#0f0;width:200px;height:100px;position:relative;top:-50px;left:50px;"> 
    RELATIVE POSITIONED 
</div> 
<div style="background-color:#00f;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div>

En el ejemplo anterior, habrá un bloque de espacio en blanco entre los dos 'por defecto posicionado' elementos. Esto se debe a que el elemento "POSICIONAMIENTO RELATIVO" todavía tiene su espacio reservado.

Si utiliza el posicionamiento absoluto, sus elementos no tendrán ningún espacio reservado, por lo que su elemento en realidad se superponen, sin romper su documento:

<div style="background-color:#f00;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 
<div style="background-color:#0f0;width:200px;height:100px;position:absolute;top:50px;left:50px;"> 
    ABSOLUTE POSITIONED 
</div> 
<div style="background-color:#00f;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div>

Por último, se puede controlar qué elementos están en la parte superior de la otros mediante el uso de z-index:

<div style="z-index:10;background-color:#f00;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 
<div style="z-index:5;background-color:#0f0;width:200px;height:100px;position:absolute;top:50px;left:50px;"> 
    ABSOLUTE POSITIONED 
</div> 
<div style="z-index:0;background-color:#00f;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div>

Fuente

2015-04-21 16:28:29 Trent

Respuesta

Cuestiones relacionadas