Overlapping divs on :hover - css

Question

I have divs that grow heightwise on hover and on hover I want them overlap all other divs, and not push them like in my example.
#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

You can make some divs that act like rows for each three divs and set it with position:absolute and z-index.
Check this link http://jsfiddle.net/5wa3X/5/

Answer 2

If they're all going to have fixed dimensions like in your example, position them all absolutely inside a container with position relative; this takes them out of the flow and they won't push any other content.

Answer 3

Well the obvious answer would be for you to use position: absolute for the container, and then position: relative with each one of those divs, so they don't affect each other's positions with the box-model. But that would mean for you to manually position them (each one) so they look like they're stacked...
But maybe there's a way around it using z-index. It would make sense that by sending the container to a lower z-index and allowing overflow, that the children would somehow "hold their ground"... but a quick experiment lead me nowhere. Will try to play with it more later :)

Answer 4

You should use position: absolute with some positioning classes.
http://jsfiddle.net/5wa3X/6/

Answer 5

and I play with Ricardo code..
use
.container div:hover {
height: 80px;
z-index:10000;
background-color:#ff0000
}
your issue get solved..
Credit goes to "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;
}