CSS3 Transición para no afectar a otros elementos?

Question

¿Es posible tener transiciones de altura que no afecten la posición de los elementos cercanos?

Este caso particular involucra divs con flotador: izquierda.

Demostración: http://ashleystewart.me/

me gustaría la transición vuelo estacionario para ir en la parte superior del elemento se puede ver en movimiento.

Answer 1

Give the container boxes Posicionamiento relativo y la caja de detalles del fly-out Posición absoluta. Como los elementos posicionados absolutos se eliminan del diseño, no interferirá con los flotadores.

demo: http://dabblet.com/gist/3729269

Answer 2

Me temo que en la lógica de diseño actual que está siguiendo, sería muy difícil de arreglar.

¿Por qué? Porque al igual que su floats en la primera fila se alinean uno al lado del otro, cuando se expande un cuadro en la fila superior en :hover, el float s en la fila inferior se reposicionará relativamente a ese también.

Así es como me gustaría ir sobre la realización de su idea:

• No utilice float ing, usar algo como display: inline-block;.
• Sus envoltorios semánticos article están causando problemas al usar inline-block;. O bien, deshágase de ellos (oops, podría no ser optimizado para el SEO), o asegúrese de no confiar en overflow: hidden; al diseñar sus "cajas".

Lo siento, no podría ser de más ayuda!

Answer 3

Puede utilizar position propiedad en lugar de utilizar float propiedad, puede hacer lo siguiente:

#idname { 
    position:fixed; 
    margin-right:100px; 
    margin-left:100px; 
    margin-top:100px; 
    margin-bottom:100px; /* I had written 100px only for example you can adjust it according to your screen */ 
} 

#idname:hover { 
    -moz-transtion: /* adjust the setting here for Firefox */; 
    -webkit-transition: /* adjust the setting here for chrome and safari */; 
    -o-transition: /* adjust the setting here for Opera */; 
} 

Esto permitirá el movimiento de div y su posición se fija.

Answer 4

Puede usar una transición en una transformación usando. Transform cambiará el elemento sin afectar el diseño. Que se quiere utilizar transform: scaleY() dicen que quería duplicar la altura de algo:

transform: scaleY(2); 
-webkit-transform: scaleY(2); 
-moz-transform: scaleY(2); 
-o-transform: scaleY(2); 

Answer 5

Se puede utilizar en lugar de position: absoluteposition: fixed, de esta manera el div no se moverá cuando se abre herramientas para desarrolladores web.

Answer 6

Coloque el <div> en una posición correcta. Mantener los exteriores en posición: fijo y las internas en la posición: absoluta

O la otra manera es hacer la altura máxima fijada para la <div> exterior y el interior <div> se debe mantener la altura máxima transformación igual a la uno exterior.Le ayudará en no hacer otra <div> obtener afectados de transacción

O a la inversa puede ser, bloques de utilizar para mostrar el contenido, en lugar usando manera flotante