Css 重叠div打开：悬停

我有一些div在hover上沿高度增长，在hover上我希望它们与所有其他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;
}

---

如果它们都有固定的尺寸，如您的示例中所示，则将它们完全放置在一个容器内，并具有相对位置；这会将它们从流中移除，并且它们不会推送任何其他内容。

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

---

但是也许有一种方法可以用z-index来解决这个问题。通过将容器发送到较低的z索引并允许溢出，孩子们将以某种方式“坚守阵地”，这是有道理的。。。但是一个快速的实验对我毫无帮助。稍后将尝试使用它：）

您可以为每三个div创建一些类似行的div，并将其设置为

位置：绝对

和

z-index

---

选中此链接

您应该在某些定位类中使用

位置：绝对

---

我玩里卡多代码

使用

你的问题解决了

归功于“里卡多”

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

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