鼠标悬停时重叠的div元素

Question

我有一些div，在鼠标悬停时会增加高度，我希望它们在悬停时可以覆盖所有其他的div，而不是像我的示例那样推开它们。

#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/

- user2908882

Answer 1

你可以为每三个div创建一些像行一样的div，并使用position:absolute和z-index进行设置。

请查看此链接：http://jsfiddle.net/5wa3X/5/

- DaniP

Answer 2

我在和Ricardo的代码一起玩。。

使用

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

你的问题已经解决了。

感谢 "RICARDO" 的贡献。

- Udit Bansal

Answer 3

如果它们都像您的示例一样具有固定的尺寸，请将它们全部绝对定位在一个相对定位的容器内；这将使它们脱离文档流，不会推动其他任何内容。

- RwwL

Answer 4

显而易见的答案是您可以为容器使用position: absolute，然后对于这些div中的每一个都使用position: relative，以便它们不会影响盒模型中彼此的位置。但这意味着您需要手动定位它们（每个），使它们看起来像是堆叠在一起...

但也许有一种方法可以通过使用z-index来解决它。将容器发送到较低的z-index并允许溢出，孩子们会以某种方式“坚守阵地”...但是快速实验没有带我去任何地方。稍后会尝试更多的操作 :)

- Ricardo Magalhães

Answer 5

你应该使用带有一些定位类的position: absolute。

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

- bjb568

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

- Bhushan wagh