css - 在 :hover 上重叠 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/

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

Answer 5

我玩里卡多代码..

利用

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

你的问题得到解决..

归功于“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;
}