带负绝对定位的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。请注意，我必须修复一些拼写错误；仔细检查标记和样式表中的类/ in是否匹配。

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下面的problem_div文本，这正是它应该在的位置。绝对div不会影响此行为。

Answer 2

只需脱下

position:absolute; 

而不是使用

top:-100px;

使用

margin-top:-100px;

我在你的jsfiddle上修好了。