Wie man divs zwingt, sich zu überlappen, aber Höhe haben?

Question

Ich habe zwei oder mehr divs, die einander überlappen müssen (aufgrund einiger Übergangseffekte, d. H. Wechsel zwischen Tabs und langsam verschwinden).

Unterhalb dieser beiden Divs befindet sich ein Fußzeilenelement.

Wenn ich position: absolute verwende, überlagert das Elternelement collapses und divs das Fußzeilenelement.

Ich kann höchste Höhe in Skripten berechnen. Aber vielleicht gibt es CSS-Methode, um die Höhe des Elternelements mit der höchsten zu vergleichen, aber lassen Sie Kinder visuell überlappen?

EDIT: Breite der Kinder ist auch unbekannt, da Design reagiert.

.parent{ 
 
\t border: 1px solid green; 
 
\t position: relative; 
 
} 
 

 
.one{ 
 
\t background-color: red; 
 
\t position: absolute; 
 
\t width: 300px; 
 
} 
 

 
.two{ 
 
\t background-color: blue; 
 
\t position: absolute; 
 
\t width: 400px; 
 
} 
 

 
footer{ 
 
\t border: 1px solid magenta; 
 
\t text-align: right; 
 
}

<div class="parent"> 
 
\t <div class="one"> 
 
\t \t Div one to overlap. Height unknown, width unknown<br> 
 
\t \t Div one to overlap. Height unknown, width unknown<br> 
 
\t \t Div one to overlap. Height unknown, width unknown<br> 
 
\t </div> 
 

 
\t <div class="two"> 
 
\t \t Div two to overlap. Height unknown, width unknown<br> 
 
\t \t Div two to overlap. Height unknown, width unknown<br> 
 
\t </div> 
 

 
\t <!-- ... ---> 
 

 
\t <footer> 
 
\t \t Footer must be below all divs 
 
\t </footer> 
 
</div>

Answer 1

Nein, das ist nicht möglich, mit CSS nur auf Elemente mit absoluter Position. Sehen Sie sich die Antworten von this post für eine detaillierte Erklärung an.

Answer 2

Wenn Sie Ihr Ziel erreichen möchten, können Sie die absolute Position nicht verwenden. Weil absolut positionierte Elemente aus dem normalen Layout entfernt werden. Das übergeordnete Element kennt seine Höhe nicht.

Sie in der folgenden Art und Weise tun:

Live Jsfiddle

CSS:

parent{ 
    border: 1px solid green; 
} 

.one{ 
    background-color: red; 
    float: left; 
    width: 300px; 
} 

.two{ 
    margin-left:-300px; 
    float: left; 
    width: 300px; 
    background-color: blue; 

} 
footer{ 
    clear: both; 
    border: 1px solid magenta; 

} 

HTML:

<div class="parent"> 
    <div class="one"> 
     Div one to overlap. Random unknown<br> 
    Div one to overlap. Random unknown<br> 
    Div one to overlap. Random unknown<br> 
    </div> 

    <div class="two"> 
     Div two to overlap. Random unknown<br> 
    Div two to overlap. Random unknown<br> 

    </div> 

    <!-- ... ---> 

    <footer> 
     Footer must be below all divs 
    </footer> 
</div> 

Einschränkungen:

• müssen Sie die Breiten der divs wissen
• Sie gleiche Breite entweder verwenden oder linken Rand Wert als den negativen Wert der größeren Breite des vorherigen divs verwenden.

Erläuterung:

Floats sitzen nebeneinander. Wenn Sie den negativen Wert von margin-left verwenden, überlagert er das vorherige div. Dann legen Sie für die Fußzeile eine klare Eigenschaft fest, bei der die Fußzeile alle Divs unten bleibt.