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

Answer 2

刚刚取消

position:absolute;

而不是使用

top:-100px;

使用

margin-top:-100px;

我把它固定在你的jsfiddle上。

具有负绝对定位的Clearfix

2 个答案:

修改