Clearfix 负绝对定位

Posted 2023-03-15

技术标签:

【中文标题】Clearfix 负绝对定位【英文标题】：Clearfix with negative absolute positioning 【发布时间】：2013-07-11 23:50:47 【问题描述】：

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

【问题讨论】：

您的 css 引用了 #negative_absolute_position 但您的 html 没有这样的元素。很抱歉。我在 HTML 中对其进行了更改，以使其在点击提交之前变得不那么有价值，并忘记编辑 CSS 我已经开始编辑了你能做一个jsfiddle的例子吗？刚刚复制粘贴时忘记关闭problem_div了吗？ 【参考方案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 不会影响此行为。

【讨论】：

【参考方案2】：

脱掉