Warum erbt die absolute Positionierung in verschachtelten Divs vom unmittelbaren übergeordneten Element?

Absolute Absolute Positionierungsanomalie

In einem mehrschichtigen Layout mit absoluter Positionierung kommt es häufig vor, dass ein inneres Div eine absolute Position hat Positionierung relativ zu seinem unmittelbaren übergeordneten Element, das auch absolut innerhalb eines anderen Div positioniert ist. In einem solchen Setup erbt das innere Div jedoch seine absolute Position von seinem unmittelbaren übergeordneten Element, was zu einem scheinbar unerwarteten Verhalten führt.

Betrachten Sie die folgende HTML-Struktur:

<code class="html"><div id="1st" style="position: relative;">
  <div id="2nd" style="position: absolute;">
    <div id="3rd" style="position: absolute;"></div>
  </div>
</div></code>

Intuitiv eine würde erwarten, dass die Position von #3. absolut relativ zu #1. ist, da #2. absolut innerhalb von #1. positioniert ist. Die Realität ist jedoch, dass die absolute Positionierung von #3rd von #2nd geerbt wird. Dies liegt daran, dass position: absolute on #2nd seine Position relativ zu seinem übergeordneten Element zurücksetzt, was dazu führt, dass #3rd absolut innerhalb von #2nd positioniert wird.

Dieses Verhalten kann auf die CSS-Spezifitätsregeln zurückgeführt werden. Wenn ein untergeordnetes Element eine absolute Position hat, wird seine Position durch den Begrenzungsrahmen seines unmittelbar übergeordneten Elements bestimmt. In diesem Fall wird die Position von #3rd durch den Begrenzungsrahmen von #2nd definiert und es ist sich der absoluten Position von #2nd relativ zu #1st nicht bewusst.

Um dieses Problem zu lösen und #3rd absolut relativ zu positionieren zu #1st muss #3rd zu einem direkten Kind von #1st gemacht werden. Mit anderen Worten würde der folgende HTML-Code zum gewünschten Verhalten führen:

<code class="html"><div id="1st" style="position: relative;">
  <div id="3rd" style="position: absolute;"></div>
</div></code>

In diesem Fall wird die absolute Position von #3rd durch die Position seines übergeordneten Elements #1st bestimmt, was auch zu erwarten wäre. Es ist wichtig zu beachten, dass sich das Zurücksetzen der Position eines übergeordneten Elements durch position: absolute auch auf die Positionierung seiner untergeordneten Elemente auswirkt, es sei denn, sie sind relativ zu einem anderen übergeordneten Element absolut positioniert.

Das obige ist der detaillierte Inhalt vonWarum erbt die absolute Positionierung in verschachtelten Divs vom unmittelbaren übergeordneten Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!