我创建了以下
CSS
.div_wrapper {
float: left;
width: 100px;
background: 3333;
margin: 15px;
background: #cacaca;
z-index: 1;
}
.div_two {
display: none;
height: 120px;
background: #444;
z-index: 999;
}
.div_one:hover .div_two {
display: block;
}
HTML
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<br style="clear:both;" />
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
当您将鼠标悬停在其上时会显示说明,但会进一步推送其他div。我已经尝试给div_wrapper一个固定的宽度,这解决了这个问题但是当div2出现时它显示在它下面的下一个div下面。我尝试添加一个z-index,它没有改变任何东西。我需要div_two显示在它下面的div的顶部而不是改变布局。
答案 0 :(得分:3)
您应该使用position: absolute
来定位此div
。绝对定位的元素不占用容器内的空间,防止它们推动其他元素。
在大多数情况下,你也希望将父元素设置为position: relative
,这样绝对元素就可以相对于父元素而不是整个文档定位。
.div_one{
position: relative;
}
.div_two {
/* ... */
position: absolute;
width: 100%;
}
答案 1 :(得分:3)
如果您希望在悬停之前在对象的位置使用空格,则可以使用visibility
,而不是display
。
visibility:hidden
,而不是display:none
和visibility:visible
,而不是dislpay:block
答案 2 :(得分:0)
您可以使用position: absolute;
来完成此操作。
这是一个小提琴http://jsfiddle.net/QbAzY/
答案 3 :(得分:0)
将position:absolute;
和width: 100px;
添加到您的.div_two
规则
.div_two {
display: none;
height: 120px;
background: #444;
z-index: 999;
position:absolute;
width: 100px;
}
<强> jsFiddle example 强>
z-index仅适用于定位元素,因此通过在.div_two元素上设置position:absolute,它不仅允许z-index工作,而且还将这些元素从文档的正常流中取出并赢得'推动其他div。请注意,您的.div_wrapper元素还有两个后台规则,以及没有执行任何操作的z-index规则。