Wie wirkt sich ein absolut positioniertes Div auf die Höhe seines übergeordneten Containers aus?

Absolute Positioned Div Impact on Parent Height

Bei der Arbeit mit CSS ist es wichtig zu berücksichtigen, wie sich die Positionierung von Elementen auf die umgebenden Elemente auswirkt. Eine häufige Herausforderung besteht darin, sicherzustellen, dass ein absolut positioniertes Div andere Elemente in seinem übergeordneten Container nicht ignoriert.

Beachten Sie den folgenden HTML- und CSS-Code:

<div>

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

Das Ziel ist um „Kind2“ vor „Kind1“ zu positionieren, insbesondere auf mobilen Geräten, bei denen die Navigation unten sein sollte. Child2 hat jedoch eine dynamische Höhe, was bedeutet, dass das Festlegen einer festen Höhe für das übergeordnete Div keine Option ist.

Da absolut positionierte Elemente aus dem Fluss entfernt werden, werden sie leider von anderen Elementen innerhalb des übergeordneten Elements ignoriert Container. Das Festlegen von overflow:hidden im übergeordneten Div oder die Verwendung von Clearfix hilft nicht.

Die Lösung

Wie in der Problemstellung erkannt, liegt die Lösung darin, dies absolut zu verstehen positionierte Elemente werden aus dem Fluss genommen. Daher ist es nicht möglich, die Höhe des übergeordneten Elements basierend auf einem absolut positionierten Element festzulegen.

Zu berücksichtigende Optionen:

• Feste Höhen: Weisen Sie beiden untergeordneten Elementen feste Höhen zu, um sicherzustellen, dass sie korrekt sind Layout.
• JavaScript: Beziehen Sie JavaScript ein, um die Positionen der Divs basierend auf der Größe von Kind2 dynamisch anzupassen.
• CSS-Flexbox- oder Rasterlayout: Diese Mit neueren CSS-Techniken können Sie die visuelle Reihenfolge von HTML-Elementen innerhalb eines übergeordneten Containers umkehren, ohne absolute Positionierung zu verwenden.

Das obige ist der detaillierte Inhalt vonWie wirkt sich ein absolut positioniertes Div auf die Höhe seines übergeordneten Containers aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!