使用CSS清除绝对定位的元素？ [英] Clear absolutely positioned elements with CSS possible?

问题描述

有没有办法用CSS清除绝对定位的元素？我创建一个页面，我需要网站的每个部分（section元素）绝对定位，我想应用页脚与这些元素下面的内容。
试图相对定位的页眉和页脚，看看是否将考虑总高度，但是页脚仍然被捕获在节元素下面。任何想法？

Is there any way to clear absolutely positioned elements with CSS? I'm creating a page where I need each part of the site (section element) to be absolutely positioned, and I want to apply a footer with content below those elements.
Tried to relatively position the header and footer to see if a total height would be taken into account but the footer still gets "trapped" underneath the section elements. Any ideas?

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

推荐答案

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

Absolutely-positioned elements are no longer part of the layout - parent items have no idea how big absolutely-positioned child elements are. You need to set the height of "content" yourself to ensure it does not overlap the footer.

这篇关于使用CSS清除绝对定位的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！