1

我创建了以下

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

4

4 回答 4

3

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

在大多数情况下，例如，您还需要将父元素设置position: relative为，以便绝对元素可以相对于其父元素而不是整个文档定位。

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

.div_one{
    position: relative;
}

.div_two {
    /* ... */
    position: absolute;
    width: 100%;
}
于 2013-08-22T20:57:47.307 回答
3

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

visibility:hidden， 代替display:none

和visibility:visible, 而不是dislpay:block

于 2013-08-22T21:00:20.260 回答
0

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

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

于 2013-08-22T21:01:04.020 回答
0

添加position:absolute;和width: 100px;到您的.div_two规则

.div_two {
    display: none;
    height: 120px;
    background: #444;
    z-index: 999;
    position:absolute;
    width: 100px;
}

jsFiddle 示例

z-index 仅适用于定位元素，因此通过在 .div_two 元素上设置 position:absolute 它不仅允许 z-index 工作，而且会将这些元素从文档的正常流程中取出，并且不会推送其他 div 下来。请注意，您的 .div_wrapper 元素还有两个背景规则，以及一个不执行任何操作的 z-index 规则。

于 2013-08-22T21:03:20.483 回答