html - 如何获得悬停时显示的 div，而不是将内容向下推到页面上？

Question

我创建了以下内容

http://jsfiddle.net/fcW66/1/

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

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

visibility:hidden，而不是 display:none

和visibility:visible，而不是dislpay:block