Wie kann ich eine übergeordnete Abteilung erweitern, um ein vollständig positioniertes Kind aufzunehmen?

Eltern-Div-Erweiterung mit absolut positioniertem Kind

Bei der Arbeit mit CSS ist es manchmal notwendig, ein Element sowohl auf dem Desktop als auch auf Mobilgeräten vor einem anderen zu positionieren Geräte. Durch die absolute Positionierung werden jedoch Elemente aus dem Fluss entfernt, sodass sie von anderen Elementen ignoriert werden.

Berücksichtigen Sie in diesem Szenario das folgende HTML und CSS:

<div>

parent {
    position: relative;
    width: 100%;
}

child1 {
    width: auto;
    margin-left: 160px;
}

child2 {
    width: 145px;
    position: absolute;
    top: 0px;
    bottom: 0px;
}

Mit diesem Setup child2 soll vor child1 positioniert werden. Diese Konfiguration schlägt jedoch fehl, da child2 aus dem Fluss entfernt wird, was dazu führt, dass das übergeordnete Div seine Höhe ignoriert. Versuche, overflow:hidden festzulegen oder Clearfix für den übergeordneten Container zu verwenden, haben keine Auswirkung.

Das grundlegende Problem besteht darin, dass absolut positionierte Elemente bei der Höhenberechnung ihrer übergeordneten Container nicht berücksichtigt werden. Daher ist es nicht möglich, die Größe des Elternteils anhand eines absolut positionierten Kindes zu bestimmen.

Um dieses Problem zu beheben, stehen zwei Optionen zur Verfügung:

• Feste Höhen verwenden : Weisen Sie Kind1 und Kind2 feste Höhen zu und stellen Sie sicher, dass die Höhe des übergeordneten Divs ausreicht, um dies zu ermöglichen beides.
• JavaScript einbeziehen: Verwenden Sie JavaScript, um die beiden Divs dynamisch neu zu positionieren, die gewünschte visuelle Reihenfolge beizubehalten und sicherzustellen, dass sich die Höhe des übergeordneten Divs entsprechend anpasst.

Das obige ist der detaillierte Inhalt vonWie kann ich eine übergeordnete Abteilung erweitern, um ein vollständig positioniertes Kind aufzunehmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!