È possibile cancellare gli elementi completamente posizionati con CSS?

Question

C'è un modo per cancellare elementi posizionati in modo assoluto con i CSS? Sto creando una pagina in cui ho bisogno che ogni parte del sito (elemento della sezione) sia posizionata in modo assoluto e voglio applicare un piè di pagina con il contenuto sotto quegli elementi.
Provato a posizionare relativamente l'intestazione e il piè di pagina per vedere se verrà presa in considerazione un'altezza totale, ma il piè di pagina rimane "intrappolato" sotto gli elementi della sezione. Qualche idea?

<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

elementi con posizione assoluta non fanno più parte del layout - elementi padre hanno idea di come grandi elementi figlio con posizione assoluta sono. È necessario impostare l'altezza del "contenuto" per assicurarsi che non si sovrapponga al piè di pagina.

Answer 2

Non utilizzare elementi posizionati in modo assoluto per i layout poiché tali elementi vengono rimossi dal flusso normale e non influenzano più gli elementi circostanti. E non sono influenzati da altri elementi.

Utilizzare il posizionamento assoluto per spostare elementi all'interno di un contenitore quando le condizioni lo consentono.

Per elementi flottanti, suggerisco di utilizzare una tecnica di compensazione specifica chiamata clearfix. Lo uso religiosamente.

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

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

Answer 3

Aveva stessa domanda, resa assoluta posizionate, ma lasciare che il primo sia relativa, come per il layout reattivo in cui l'altezza non cambia, esso ha contribuito a tenere traccia dell'altezza elementi cambiamenti, avviso in questo caso tutti gli elementi hanno stessa altezza:

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