第二个div出现在相对定位的div之下

Question

我希望底部包装 div显示在 top-wrapper div下方（与普通订单一样）。
现在它出现在 top-wrapper

之下

我在这里做错了什么？

http://jsfiddle.net/uqtZ5/

HTML

<div id='top-wrapper'>
    <a href='#'>Title to overlay</a>
    <img src='image.jpg' />
</div>
<div id='bottom-wrapper'>
    <a href='#'><h3>Header</h3></a>
    <p>Lorum ipsum</p>
</div>

CSS

#top-wrapper {
    position:relative;
}

#top-wrapper a,
#top-wrapper img {
    position: absolute;
}

#top-wrapper a {
    background-color:#FF0000;
    z-index: 10;
}

Answer 1

您将top-wrapper位置中的img设置为绝对位置。

在这种情况下，位置在相对定位的DIV中是绝对的，但是你没有设置顶部包装的高度，所以绝对定位的内容来自div底部包装。尝试指定顶部包装高度以匹配img高度，看看是否能解决您的问题。

所以试试这个：

#top-wrapper {
    position:relative;
    height: 216px;
}