Überlappende divs auf: Hover

Question

Ich habe divs, die in der Höhe Hover und Hover wachsen, ich will, dass sie alle anderen Divs überlappen und nicht wie in meinem Beispiel schieben.

#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

Wenn sie alle wie in Ihrem Beispiel haben Fixmaßen gehen, positionieren sie alle absolut innerhalb eines Behälters mit Position relativ; das bringt sie aus dem Fluss und sie werden keinen anderen Inhalt pushen.

Answer 2

Nun, die offensichtliche Antwort wäre, dass Sie position: absolute für den Container verwenden und dann position: relativ zu jedem dieser divs, so dass sie die Positionen des anderen mit dem Box-Modell nicht beeinflussen. Aber das würde für Sie bedeuten, sie manuell zu positionieren (jeder), so dass sie aussehen, als wären sie gestapelt ...

Aber vielleicht gibt es einen Weg um es mit Z-Index zu umgehen. Es würde Sinn machen, dass die Kinder, wenn sie den Container in einen niedrigeren Z-Index schicken und Überlauf zulassen, irgendwie "ihren Boden halten" ... aber ein schnelles Experiment führt mich nirgendwohin. Will versuchen, damit später mehr zu spielen :)

Answer 3

Sie können einige divs, die wie Zeilen für jede drei divs fungieren und stellen Sie es mit position:absolute und z-index.

prüfen Link http://jsfiddle.net/5wa3X/5/

Answer 4

Sie position: absolute mit einigen Positionierung Klassen verwenden sollten.

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

Answer 5

und ich mit Ricardo Code spielen ..

Verwendung

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

Ihr Problem .. gelöst bekommen geht

Credit "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; 
}