Div sovrapposte su: hover

Question

Ho div che crescono in altezza su hover e su hover voglio che si sovrappongano a tutte le altre div, e non le spingo come nel mio esempio.

#container{ 
width: 300px; 
} 

#container a div{ 
float:left; 
width: 100px; 
height: 60px; 
-webkit-transition: all 0.25s ease; 
} 

#container .color1{ 
background: #444; 
} 

#container .color2{ 
background: #555; 
} 

#container .color3{ 
background: #666; 
} 

#container .color4{ 
background: #777; 
} 

#container .color5{ 
background: #888; 
} 

#container a div:hover{ 
height: 80px; 
-webkit-transition: all 0.25s ease; 
} 

http://jsfiddle.net/MrSlacker/5wa3X/

Answer 1

Se stanno tutti andando ad avere dimensioni fisse, come nel tuo esempio, tutti loro posizione di assoluto all'interno di un contenitore con la posizione relativa; questo li porta fuori dal flusso e non spingono altri contenuti.

Answer 2

Bene, la risposta ovvia sarebbe per voi utilizzare la posizione: assoluta per il contenitore e quindi posizione: relativa a ciascuno di questi div, in modo che non influenzino le rispettive posizioni con il modello box. Ma questo significherebbe per te posizionarli manualmente (ognuno) in modo che sembrino impilati ...

Ma forse c'è un modo per aggirarlo usando z-index. Avrebbe senso che inviando il contenitore a uno z-index inferiore e consentendo l'overflow, i bambini avrebbero in qualche modo "tenuto duro" ... ma un rapido esperimento non mi ha portato da nessuna parte. Proverò a giocare più tardi :)

Answer 3

È possibile creare div che si comportino come righe per ogni tre div e impostarlo con position:absolute e z-index.

controllare questo link http://jsfiddle.net/5wa3X/5/

Answer 4

Si dovrebbe usare position: absolute con alcune classi di posizionamento.

http://jsfiddle.net/5wa3X/6/

Answer 5

e gioco con il codice di Ricardo ..

uso

.container div:hover { 
    height: 80px; 
    z-index:10000; 
    background-color:#ff0000 
} 

il problema vengono risolti ..

merito va a "RICARDO"

Answer 6

#container{ 
width: 300px; 
} 

#container a div{ 
float:left; 
width: 100px; 
height: 60px; 
-webkit-transition: all 0.25s ease; 
} 

#container .color1{ 
background: #444; 
} 

#container .color2{ 
background: #555; 
} 

#container .color3{ 
background: #666; 
} 

#container .color4{ 
background: #777; 
} 

#container .color5{ 
background: #888; 
} 

#container a div:hover{ 
/*height: 80px;*/ /*No need to specify width in hover*/ 
-webkit-transition: all 0.25s ease; 
}