So verhindern Sie, dass Eltern von absolut positionierten Elementen kollabieren

Sie können nicht: Sobald das Kind in der absoluten Position ist, ist es praktisch "außerhalb" des Elternteils (in Erscheinung).

Was Sie tun können, wenn Sie jQuery eingeschlossen haben, ist dieser unelegante Hack:

und fügen Sie die Klasse "absolutepos" hinzu, wenn Sie das Div an der absoluten Position platzieren:

Sie können: von etwas, das ich " duale Erziehung " genannt habe:

Bei einer ähnlichen Herausforderung habe ich am Ende ein äußeres relatives Objekt definiert (das die Floats parentalisiert) und ein absolut definiertes Kästchen mit den gleichen Dimensionen wie das relative Elternteil, beginnend bei 0,0 des gemeinsamen (relativen) Elternteils: eine identische Kopie mit dem Vorteil, Objekte darin platzieren zu können, die die äußeren Grenzen des Floats ignorieren können (ich brauchte es, um ein Objekt auf der Seite zu zentrieren, unabhängig von der Breite der dynamischen Floats.)

Das "Dual Parenting" hat beide Probleme gequetscht:

1. Das absolute Elternelement konnte nicht die Höhe der Gleitkommazahlen erhalten (sondern die Höhe des gemeinsamen Elternteils, das sich an die Gleitkommazahlen anpassen konnte).
2. Das relative Parent konnte ein Objekt nicht zentriert auf die Seite positionieren (es würde nur die Mitte zwischen den Floats finden und den zentrierten Inhalt daran hindern, die Grenzen der schwebenden Objekte zu überqueren).

Ich habe eine Geige (enthält Dokumentation) gezeigt, die zeigt, wie diese Einrichtung sich quetscht und zusammendrückt, während sie immer noch die zentrierte Box beibehält. Die Grundidee ist im folgenden Code beschrieben:

html (Nebenbei bemerkt: die Reihenfolge der divs (links-Mitte-rechts, Mitte-rechts-links, ...) ist irrelevant.)

css