Warum wirkt sich ein absolut positioniertes Flex-Element auf das Layout in IE11 aus?

Absolut positioniertes Flex-Element im normalen Fluss in IE11 enthalten

In einem Flexbox-Layout werden Elemente basierend auf ihrer Position in einer Zeile oder Spalte angeordnet Flexeigenschaften. Wenn jedoch ein Element innerhalb der Flexbox absolut positioniert ist, wird es zu einem Out-of-Flow-Element und sollte nicht am Layout teilnehmen.

Im bereitgestellten Codebeispiel:

<div class="container">
  <div class="c1">Content 1</div>
  <div class="c2">Content 2</div>
  <div class="bg">Background</div>
</div>

Das „.bg“-Div ist absolut positioniert. Trotzdem wird in IE11 der Abstand zwischen den Flex-Elementen so verteilt, als ob das „.bg“-Div Teil des normalen Flusses wäre. Dies ist eine Abweichung von der Flexbox-Spezifikation.

Problemumgehung:

Um dieses Problem zu beheben, besteht eine Problemumgehung darin, das absolut positionierte „.bg“-Div zwischen den anderen zu verschieben zwei Flex-Elemente:

<div class="container">
  <div class="c1">Content 1</div>
  <div class="bg">Background</div>
  <div class="c2">Content 2</div>
</div>

Mit dieser Strukturänderung hat das „.bg“-Div keinen Einfluss mehr auf die Raumverteilung zwischen den Flex-Elementen und dem gewünschtes Layout erreicht wird.

Das obige ist der detaillierte Inhalt vonWarum wirkt sich ein absolut positioniertes Flex-Element auf das Layout in IE11 aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!