Absolute Positionierung innerhalb der absoluten Position

Ich habe 3 divElemente.

1. divist größer (Wrap) und hatposition:relative;

Die 2. divPosition ist absolut zur 1. divrelativen Positionierung positioniert (und in der 1. Position enthalten div).

3. divist im 2. enthalten divund hat auch absolute Positionierung.

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

Warum ist die 3. divPosition absolut zur 2. Position div(die auch die absolute Position zur 1. Position ist div) und nicht zur 1. divPosition, die eine relative Position hat?

Denn die 3. divPosition ist die absolute Positionierung zur absolut positionierten 2 div..

Weil position: absolutedie relative Position für Kinder genauso zurückgesetzt position: relativewird.

Daran führt kein Weg vorbei - wenn Sie möchten, dass der dritte divabsolut relativ zum ersten positioniert ist, müssen Sie ihn zum Kind des ersten machen.

Beide position:relativeund position:absoluteetablieren enthaltende Elemente als Positionierungs-Ascestoren.

Wenn Sie möchten, dass Div 3 basierend auf Div 1 positioniert wird, machen Sie es zu einem direkten Kind von Div 1.

Beachten Sie, dass position: relativedas Element relativ zu seiner natürlichen Position positioniert ist und position: absolutedass das Element relativ zu seinem ersten position:relativeoder position:absoluteVorfahren positioniert ist .

Position statisch: Die statische Position ist die Standardmethode, mit der ein Element im normalen Ablauf Ihrer HTML-Datei angezeigt wird, wenn überhaupt keine Position angegeben ist.

Wichtig: top, right, bottomund lefthaben Eigenschaften , keine Auswirkung auf Statisch ELEMENT AUFGE.

Position relativ: Wenn Sie ein Element mit dem relativen Wert positionieren, bleibt das Element (und der Platz, den es einnimmt) im normalen Fluss Ihrer HTML-Datei.

Anschließend können Sie das Element um einen gewissen Betrag bewegen , um die Eigenschaften mit left, right, topund bottom. Dies kann jedoch dazu führen, dass das Element andere Elemente auf der Seite überlappt. Dies kann der gewünschte Effekt sein oder auch nicht.

Ein relativ positioniertes Element kann sich von seiner Stelle bewegen, aber der Platz, den es einnimmt, bleibt erhalten.

Position absolut: Durch Anwenden des absoluten Positionswerts auf ein Element wird es aus dem normalen Fluss entfernt. Wenn Sie das absolut positionierte Element verschieben, ist sein Referenzpunkt der obere / linke Rand des nächstgelegenen enthaltenen Elements, dessen Position nicht statisch deklariert ist - auch als nächstgelegener Positionierungskontext bezeichnet. Wenn also kein enthaltendes Element mit einer anderen Position als statisch vorhanden ist, wird es von der oberen linken Ecke des Körperelements aus positioniert.

In Ihrem Fall ist der nächstgelegene Behälter des 3. der 2 ..

Noch eine klarstellende Antwort.

Ihr aktuelles Szenario lautet wie folgt:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

Und du kämpfst irgendwie damit.

Wenn Sie den HTML-Code ändern können, gehen Sie einfach wie folgt vor:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

Der Grund, warum das 3. divElement absolut zum 2. divElement positioniert ist, liegt darin, dass, wie in der CSS-Spezifikation hier erläutert , das "übergeordnete" Element (besser gesagt: Block enthalten) eines absolut positionierten Elements nicht unbedingt sein unmittelbares übergeordnetes Element ist, sondern vielmehr sein unmittelbar positioniertes Element, dh jedes Element, dessen Position auf etwas anderes als staticzum Beispiel eingestellt istposition: relative/absolute/fixed/sticky;

Wenn Sie also möchten, dass das 3. divElement in Bezug auf das 1. Element absolut in Bezug auf das 1. Element positioniert ist div, sollten Sie Ihr 2. divElement als position: static;Standardwert position: ...festlegen (oder einfach eine Deklaration im Regelsatz Ihres 2. divElements entfernen ). .

Das Obige macht den 1. divzum enthaltenden Block des 3. absolut positioniert div, wobei der 2. divfür diesen Positionierungszweck ignoriert wird .

Ich hoffe es hilft.

Für den Fall, dass noch jemand nach einer Antwort darauf sucht.

Ich konnte dieses Ergebnis erzielen, indem ich clear: both;dem ersten absolut positionierten Div einen Stil hinzufügte , der das Kind zurücksetzte und ihm erlaubte, seine eigene absolutePositionierung zu verwenden.