如何使用CSS清除绝对定位的元素？

Question

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

<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>

- Staffan Estberg

---

绝对定位的元素不是浮动元素，因此没有所谓的清除它们。 - Mr. Alien

我也会说，没有 JavaScript 是无法完成这个任务的。 - insertusernamehere

我明白。但是你理解我的“清晰”意思吗？一种将下一个父级放置在先前内容下方的行为。 - Staffan Estberg

Answer 1

绝对定位的元素不再属于布局 - 父级元素无法确定绝对定位的子元素的大小。您需要自己设置 "content" 的高度，以确保它不会与页脚重叠。

- Diodeus - James MacFarlane

Answer 2

不要使用绝对定位元素来进行布局，因为这些元素不再影响周围的元素。它们也不受其他元素的影响。当条件允许时，请使用绝对定位将元素移动到容器内。

对于浮动元素，建议您使用称为clearfix的特定清除技术。我非常信奉这一技术。 http://nicolasgallagher.com/micro-clearfix-hack/ http://jsfiddle.net/necolas/K538S/

- Lex Semenenko

---

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

@StaffanEstberg 如果可能的话，您能否发布您的JS解决方案？ - Michel Ayres

Answer 3

我也曾经遇到同样的问题，尝试将所有元素都设置为绝对定位，但保留第一个元素相对定位，并且对于响应式布局，当高度发生变化时，这能够帮助我们跟踪元素高度的变化。需要注意的是，在这种情况下，所有元素的高度都是相同的。

.gallery3D-item {
    position: absolute;
    top: 0;
    left: 0;
}
.gallery3D-item:first-of-type {
    position: relative;
    display: inline-block;
}

- o roodie

Answer 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;
}

- cjohansson