Czy możliwe jest wyczyszczenie całkowicie pozycjonowanych elementów za pomocą CSS?

Question

Czy istnieje sposób na wyczyszczenie absolutnie pozycjonowanych elementów za pomocą CSS? Tworzę stronę, na której potrzebuję, aby każda część witryny (element sekcji) była absolutnie ustawiona i chcę zastosować stopkę z zawartością poniżej tych elementów.
Próbowano względnie ustawić nagłówek i stopkę, aby sprawdzić, czy wzięto pod uwagę całkowitą wysokość, ale stopka nadal jest "uwięziona" pod elementami przekroju. Jakieś pomysły?

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

Answer 1

Absolutnie-umieszczone elementy nie są już częścią układu - pozycje dominujące nie mają pojęcia, jak wielkie absolutnie-pozycjonowane elementy potomne są. Musisz sam ustawić wysokość "treści", aby nie nakładała się na stopkę.

Answer 2

Nie należy używać elementów pozycjonowanych bezwzględnie dla układów, ponieważ elementy te są usuwane z normalnego przepływu i nie mają już wpływu na elementy wokół nich. I nie są pod wpływem innych elementów.

Użycie pozycjonowania bezwzględnego do przenoszenia elementów wewnątrz kontenera, gdy pozwalają na to warunki.

Dla elementów pływających proponuję użyć konkretnej techniki czyszczenia o nazwie clearfix. Używam tego w sposób religijny.

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

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

Answer 3

Gdyby to samo pytanie, wykonane wszystkie absolutny ustawione, ale niech pierwszy być względne, jak dla układu reagującego gdzie wysokość ulega zmianie, to pomogło śledzić wysokości elementów zmiany, wypowiedzenia w tym przypadku wszystkie elementy mają taką samą wysokość:

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