在 :hover 上重叠 div答案

【问题标题】：Overlapping divs on :hover在 :hover 上重叠 div
【发布时间】：2013-10-31 22:41:44
【问题描述】：

我的 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/

【问题讨论】：

标签： css html hover overlap

【解决方案1】：

您可以为每三个 div 创建一些类似于行的 div，并将其设置为 position:absolute 和 z-index。

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

【讨论】：

【解决方案2】：

如果它们都像您的示例中那样具有固定尺寸，请将它们全部绝对定位在具有相对位置的容器内；这会使他们脱离流程，并且不会推送任何其他内容。

【讨论】：

【解决方案3】：

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

但也许有一种方法可以使用 z-index。通过将容器发送到较低的 z-index 并允许溢出，这是有道理的，孩子们会以某种方式“坚持自己的立场”......但是一个快速的实验让我无处可去。以后会尝试更多地玩它:)

【讨论】：

【解决方案4】：

您应该将position: absolute 与一些定位类一起使用。

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

【讨论】：

【解决方案5】：

我在玩里卡多代码..

使用

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

您的问题得到解决..

归功于“RICARDO”

【讨论】：

【解决方案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;
}

【讨论】：