Transition CSS3

[schulz]

Maestros: Estoy aprendiendo a usar la propiedad Transition de CSS, lo que quiero hacer es que al pasar el mouse por sobre el div este se expanda hacia abajo hasta los 120px, hasta ahí todo sale bien. El problema es que al crecer este div "empuja" al div que esta abajo.

Lo que necesito hacer es que al estirarse el DIV superior este quede encima del DIV inferior, es posible hacer esto??

Cualquier ayuda es bienvenida.


CSS

Código HTML:

<style type="text/css">

div.expa{

	width:100px;
	height:60px;
	margin:5px;
        background-color: red;
	transition: 1s;
	-moz-transition: 1s;
	-webkit-transition: 1s;
	-o-transition: 1s;
					
 }

#fijo{

      width: 100%;
      height: auto;
      color: cyan;
      background-color: green;
					
}

div.expa:hover {

height:120px;
}

</style> 

HTML

Código HTML:

<div class="expa">Texto</div>
	<div id="fijo"><p>Lorem ipsum dolor sit amet, consectetuer
 adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam 
malesuada erat ut turpis. Suspendisse urna nibh, viverra non, 
semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor
 mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
     </div> 

Saludos

[flashmax]

hola haber si así lo solucionas

Código HTML:

div.expa{
	position:absolute;
	z-index:1;
       width:100px;
	height:60px;
	margin:5px;
        background-color: red;
	transition: 1s;
	-moz-transition: 1s;
	-webkit-transition: 1s;
	-o-transition: 1s;
					
 }

[schulz]

Iniciado por flashmax

hola haber si así lo solucionas

Código HTML:

div.expa{
	position:absolute;
	z-index:1;
       width:100px;
	height:60px;
	margin:5px;
        background-color: red;
	transition: 1s;
	-moz-transition: 1s;
	-webkit-transition: 1s;
	-o-transition: 1s;
					
 }

No amigo no se solucionó, quedó así:



La idea es que el div rojo este arriba y el verde abajo no uno encima del otro como se ve en la captura.

Saludos.

[flashmax]

Lo que necesito hacer es que al estirarse el DIV superior este quede encima del DIV inferior, es posible hacer esto??

entonces te has explicado mal!

[schulz]

Iniciado por flashmax

entonces te has explicado mal!

Creo que si :P

Acá lo dejo mas claro. (no pude editar el primer post, no encuentro la opción "editar")

[flashmax]

Es lo que te indique mas arriba lo único que tienes que posicionar el div verde donde tu quieras por que al darle posicion absolute y z index lo tienes en capas.

[schulz]

Iniciado por flashmax

Es lo que te indique mas arriba lo único que tienes que posicionar el div verde donde tu quieras por que al darle posicion absolute y z index lo tienes en capas.

Tienes toda la razón, no me manejaba con el asunto de "position", muchas gracias por la ayuda.