Clear absolut positionierte Elemente mit CSS möglich? - html, css, css-position, klar

Gibt es eine Möglichkeit, absolut positioniert zu löschen?Elemente mit CSS? Ich erstelle eine Seite, auf der ich jeden Teil der Website (Abschnittselement) absolut positionieren muss, und ich möchte eine Fußzeile mit Inhalt unterhalb dieser Elemente anwenden.
Versucht, die Kopf- und Fußzeile relativ zu positionieren, um zu sehen, ob eine Gesamthöhe berücksichtigt wird, aber die Fußzeile immer noch unter den Abschnittselementen "gefangen" ist. Irgendwelche Ideen?

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

Antworten:

Absolut positionierte Elemente sind nicht länger Teildes Layouts - Elternelemente haben keine Ahnung, wie groß absolut positionierte Kindelemente sind. Sie müssen die Höhe von "Inhalt" selbst festlegen, um sicherzustellen, dass sie die Fußzeile nicht überlappt.

Verwenden Sie keine absolut positionierten Elemente für Layouts, da Elemente aus dem normalen Fluss entfernt werden und keine Elemente mehr um sie herum beeinflussen. Und sie werden nicht von anderen Elementen beeinflusst.

Verwenden Sie die absolute Positionierung, um Elemente in einem Container zu verschieben, wenn die Bedingungen es zulassen.

Für Floated-Elemente empfehle ich Ihnen, eine bestimmte Clearing-Technik namens Clearfix zu verwenden. Ich benutze es religiös.

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

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

Hatte die gleiche Frage gestellt, alle absolut positioniert,aber der erste sollte relativ sein, da für das reaktionsfähige Layout, wo die Höhe sich ändert, es half, die Höhenänderungen der Elemente zu verfolgen, beachte in diesem Fall, dass alle Elemente dieselbe Höhe haben:

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