0

我正在使用响应式布局进行项目。我有一个位于标题 div 下方和周围的 div。我用负绝对定位做到了这一点。问题是后面的元素被定位在它上面。绝对定位使该 div 脱离了页面的正常流程，现在东西在它上面囤积。

通常，我只会将其余元素绝对定位在内容 div 中，但绝对定位的 div 包含一个响应式图像滑块，因此 div 的高度会根据屏幕的宽度而变化。

<div id="container">
    <div id="header"></div>
    <div id="content">
        <div id="absolutely_positioned"></div>
        <div id="problem_div">
    </div>
</div>

#container {
max-width: 1600px;
}
#header {
    width: 52.5%
    height: 146px;
}
#content {
position: relative;
}
#absolute_position{
position: absolute;
top:-100px;
}
4

2 回答 2

1

绝对定位的 div 后面的元素会堆在它上面吗？我没有得到问题：jsfiddle。请注意，我必须修正一些错别字；仔细检查标记和样式表中的类/ID 是否匹配。

CSS（固定错别字）：

#container {
max-width: 1600px;
    border:2px dotted black;
}
#header {
    width: 52.5%;
    height: 146px;
    border:1px solid red;
}
#content {
position: relative;
}
#absolutely_positioned{
    position: absolute;
    top:-100px;
    background:blue;
}

当然，这是假设我上面的评论没有隔离问题，因为problem_div您发布的代码中没有结束标签。

编辑

针对您的上述评论，我现在知道您的问题。您会注意到蓝色框与红色框正下方对齐。这是正常行为，因为它们都是相对 div。当您将 div 设为绝对时，它不仅会忽略周围的 div（但不包含 div），而且周围的 div 也会忽略它。也就是说，绿色盒子不会把蓝色盒子往下推，只有红色盒子会。为了进一步说明答案，如果您单击我的 jsfiddle，您将在标题 div 的正下方看到 question_div 文本，这就是它应该在的位置。绝对 div 不会影响此行为。

于 2013-07-12T00:31:25.660 回答
1

只需取下

position:absolute;

而不是使用

top:-100px;

利用

margin-top:-100px;

我把它固定在你的 jsfiddle 上。

于 2013-07-12T00:42:00.583 回答