Warum erbt ein absolut positioniertes Element innerhalb eines relativ positionierten Elements seine Position von seinem unmittelbaren übergeordneten Element?

Absolute Positionierung innerhalb der relativen Positionierung: Warum die Hierarchie wichtig ist

In HTML wird die Positionierung von Elementen durch die CSS-Positionierungseigenschaft bestimmt. Wenn einem Element eine absolute Positionierung zugewiesen wird, wird es aus seinem normalen Fluss im Dokument entfernt und seine Position wird stattdessen relativ zu seinem nächsten Vorgänger mit position: absolute oder position: relative definiert.

Frage:

Bedenken Sie die folgende HTML-Struktur:

<div id="1st">
  <div id="2nd">
    <div id="3rd"></div>
  </div>
</div>

Wenn das erste Div die Position: relativ hat, hat das zweite Div die Position: absolut und das dritte Div hat auch die Position: absolut , warum ist das dritte Div absolut relativ zum zweiten Div positioniert und nicht zum ersten Div?

Antwort:

Der Schlüssel zum Verständnis dieses Verhaltens liegt in der absoluten Art und Weise Die Positionierung wirkt sich auf die Position untergeordneter Elemente aus.

Wenn ein Element absolut positioniert ist, werden alle darin enthaltenen untergeordneten Elemente auch absolut relativ dazu positioniert, selbst wenn diese untergeordneten Elemente ihre eigene absolute Positionierung haben. Dies liegt daran, dass die absolute Positionierung die standardmäßige relative Positionierung für untergeordnete Elemente effektiv zurücksetzt.

In unserem Beispiel ist das dritte Div absolut relativ zum zweiten Div positioniert, da das zweite Div die Position „absolut“ hat. Die absolute Positionierung des ersten Divs (mit Position: relativ) hat keinen Einfluss auf die Positionierung des dritten Divs, da es kein direkter Vorfahre des dritten Divs ist.

Um das gewünschte Verhalten des dritten Divs zu erreichen Um ein div absolut relativ zum ersten div zu positionieren, müssten wir die absolute Positionierung aus dem zweiten div entfernen und das dritte div zu einem direkten untergeordneten Element des ersten div machen:

<div id="1st">
  <div id="3rd"></div>
</div>

Das obige ist der detaillierte Inhalt vonWarum erbt ein absolut positioniertes Element innerhalb eines relativ positionierten Elements seine Position von seinem unmittelbaren übergeordneten Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!