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制作一些行，就像行一样，并使用position:absolute和z-index进行设置。

点击此链接http://jsfiddle.net/5wa3X/5/

Answer 2

如果它们都具有固定尺寸，就像在你的例子中一样，将它们全部放在一个相对位置的容器内;这使他们脱离了流程，他们不会推送任何其他内容。

Answer 3

很明显的答案是你使用position：absolute作为容器，然后定位：相对于每个div的相对，所以它们不会影响彼此在盒子模型中的位置。但这意味着您可以手动定位它们（每个），使它们看起来像是堆叠在一起......

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

Answer 4

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

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

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

重叠div：悬停

6 个答案: