Clearfix 负绝对定位

Question

我正在开发一个使用响应式布局的项目。我有一个位于标题 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;
}

Answer 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 不会影响此行为。

Answer 2

脱掉

position:absolute; 

而不是使用

top:-100px;

使用

margin-top:-100px;

我在你的 jsfiddle 上修复了它。