绝对定位的元素盖住下方的元素时，为啥把下方的position设置为relative时，会不被盖住呢？

Posted 2023-03-30

因为relative不脱离文档流，在原有位置大小还在那，你再定位，他还是有个位置在原来的地方，所以不会被覆盖，而position是脱离文档流的，它直接飘在文档流外，在文档流内没有大小，你放在文档流之外的肯定会覆盖文档流，建议定位少用，后期维护会很麻烦 参考技术A 因为position:relative对象不可层叠，记住就行了，在有z-index的情况下用position:absolute本回答被提问者采纳

可以用 CSS 清除绝对定位的元素吗？

【中文标题】可以用 CSS 清除绝对定位的元素吗？

【英文标题】：Clear absolutely positioned elements with CSS possible?

【发布时间】：2012-10-01 00:47:16

【问题描述】：

有没有办法用 CSS 清除绝对定位的元素？我正在创建一个页面，我需要网站的每个部分（部分元素）都绝对定位，并且我想在这些元素下方应用一个包含内容的页脚。尝试相对定位页眉和页脚以查看是否将考虑总高度，但页脚仍然被“困”在节元素下方。有什么想法吗？

<header style="position: relative;"></header>

<div id="content" style="position: relative;">

    <section id="a" style="position: absolute;"></section>

    <section id="b" style="position: absolute;"></section>

    <section id="c" style="position: absolute;"></section>

    <section id="d" style="position: absolute;"></section>

    <section id="e" style="position: absolute;"></section>

</div>

<footer style="position: relative;"></footer>

【问题讨论】：

绝对定位元素不是浮动元素，因此没有什么比清除它们更好的了..

我还要说没有 JavaScript 是无法做到这一点的。

我明白了。但是当我的意思是“清晰”时，你明白我在追求什么吗？将下一个父级置于先前内容之下的行为。

【参考方案1】：

绝对定位的元素不再是布局的一部分——父项不知道绝对定位的子元素有多大。您需要自己设置“内容”的高度，以确保它不会与页脚重叠。

【参考方案2】：

不要在布局中使用绝对定位的元素，因为这些元素会从正常流程中移除，并且不再影响它们周围的元素。而且它们不受其他元素的影响。

在条件允许的情况下，使用绝对定位在容器内移动元素。

对于浮动元素，我建议您使用一种称为 clearfix 的特定清除技术。我虔诚地使用它。

http://nicolasgallagher.com/micro-clearfix-hack/

http://jsfiddle.net/necolas/K538S/

【讨论】：

我非常熟悉如何处理常规结构，但对于这种情况，我需要将这些元素绝对定位。我决定改用 JS 解决方案。

@StaffanEstberg 如果还有可能，你能发布你的 js 解决方案吗？

【参考方案3】：

有同样的问题，所有的都是绝对定位，但是让第一个是相对的，至于高度变化的响应式布局，它确实有助于跟踪元素的高度变化，注意在这种情况下所有元素都具有相同的高度：

.gallery3D-item 
    position: absolute;
    top: 0;
    left: 0;

.gallery3D-item:first-of-type 
    position: relative;
    display: inline-block;

【参考方案4】：

我发现了this 的简单解决方案，它可能无法涵盖所有​​可能的问题，但至少它解决了我的问题。

HTML：

<p>Content before</p>
<div class="offset-wrapper">
    <div class="regular">
        <img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
    </div>
    <div class="special">
        <img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
    </div>
</div>
<p>Content after</p>

CSS：

.offset-wrapper 
  background: green;
  position: relative;
  width: 100px;

.offset-wrapper .regular 
  visibility: hidden;

.offset-wrapper .special 
  bottom: -15px;
  left: -15px;
  position: absolute;