Warum erbt ein absolut positioniertes Element seine Positionierung von seinem nächstgelegenen absolut positionierten Elternelement und nicht von seinem direkten Vorfahren?

Absolute Positionierung verschachtelt in absoluter Positionierung

Innerhalb eines Webdokuments können Elemente mithilfe der CSS-Positionseigenschaft positioniert werden. Bei der Einstellung „relativ“ wird ein Element relativ zu seiner normalen Position positioniert, während „absolut“ ein Element absolut relativ zu seinem nächstgelegenen positionierten Vorgänger positioniert.

Im bereitgestellten Szenario gibt es drei div-Elemente:

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

• #1. hat die Position: relativ.
• #2. ist absolut relativ zu #1. positioniert.
• #3. ist absolut relativ zu #2. positioniert.

Es stellt sich die Frage: Warum ist #3. absolut relativ zu #2. positioniert und nicht zu seinem direkten Vorfahren #1?

Die Antwort liegt im Verhalten der absoluten Positionierung. Wenn ein Element absolut positioniert ist, setzt es die Position seiner untergeordneten Elemente zurück. In diesem Fall ist #2nd absolut relativ zu #1st positioniert, sodass alle untergeordneten Elemente von #2nd (einschließlich #3rd) absolut relativ zu #2nd positioniert sind. Dieses Verhalten ist beabsichtigt und kann nicht umgangen werden.

Um eine absolute Positionierung relativ zum äußersten Div (#1st) zu erreichen, muss #3rd zu einem direkten untergeordneten Element von #1st gemacht werden:

<code class="html"><div id="1st">
  <div id="3rd"></div>
</div></code>

Diese Anordnung stellt sicher, dass #3rd absolut relativ zu seinem nächsten positionierten Vorfahren, nämlich #1st, positioniert ist.

Das obige ist der detaillierte Inhalt vonWarum erbt ein absolut positioniertes Element seine Positionierung von seinem nächstgelegenen absolut positionierten Elternelement und nicht von seinem direkten Vorfahren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!