Question

我创建了以下

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的顶部而不是改变布局。

Answer 1

您应该使用position: absolute来定位此div。绝对定位的元素不占用容器内的空间，防止它们推动其他元素。

在大多数情况下，你也希望将父元素设置为position: relative，这样绝对元素就可以相对于父元素而不是整个文档定位。

http://jsfiddle.net/fcW66/7/

.div_one{
    position: relative;
}

.div_two {
    /* ... */
    position: absolute;
    width: 100%;
}

Answer 2

如果您希望在悬停之前在对象的位置使用空格，则可以使用visibility，而不是display。

visibility:hidden，而不是display:none

和visibility:visible，而不是dislpay:block

Answer 3

您可以使用position: absolute;来完成此操作。

这是一个小提琴http://jsfiddle.net/QbAzY/

Answer 4

将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规则。

如何在悬停时显示div，而不是在页面上显示内容？

4 个答案: