Absolutne pozycjonowanie w pozycji absolutnej

Zarówno position:relative, jak i position:absolute ustalają elementy zawierające elementy jako elementy pozycjonujące.

Jeśli chcesz, aby div 3 był ustawiony na podstawie div 1, uczyń go bezpośrednim potomkiem div 1.

Zauważ, że position: relative oznacza, że element jest umieszczony względem swojego naturalnego położenia i position: absolute oznacza, że element jest umieszczony względem swojego pierwszego position:relative LUBposition:absolute przodka .

Position static: pozycja statyczna jest domyślną drogą elementu pojawi się w normalnym przepływie twojego Plik HTML, jeśli w ogóle nie podano pozycji.

Ważne: top, right, bottom i left właściwości nie mają wpływu na statycznie POZYCJONOWANY ELEMENT.

Pozycja względna: pozycjonowanie elementu z wartością względną utrzymuje element (i zajmowaną przez niego przestrzeń) w normalnym przepływie pliku HTML.

Można następnie przenieść element o pewną kwotę używając właściwości left, right, top i bottom. Może to jednak spowodować nakładanie się elementu na inne elementy, które znajdują się na strona-która może, ale nie musi być efektem, który chcesz.

Względnie umieszczony element może poruszać się ze swojego miejsca, ale zajmowana przez niego przestrzeń pozostaje.

Pozycja absolutna: zastosowanie bezwzględnej wartości pozycji do elementu usuwa go z normalnego przepływu. Podczas przesuwania elementu bezwzględnego, jego odniesienie punkt to górny / lewy najbliższy element zawierający, który ma zadeklarowaną pozycję inną niż statyczna-zwany także najbliższym kontekstem pozycjonowania. Tak więc, jeśli nie istnieje element zawierający element o innej pozycji niż statyczna, to zostanie on umieszczony z lewego górnego rogu element ciała.

W Twoim przypadku najbliższy kontener 3rd jest 2nd.

Kolejna wyjaśniająca odpowiedź.

Twój obecny scenariusz jest taki:

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

Jeśli możesz zmienić HTML, po prostu zrób to:

#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 */

Powodem, dla którego 3. div element jest absolutnie umieszczony na 2. div jest to, że jak wyjaśnia Specyfikacja CSS tutaj, jest to, że element "rodzic" (lepiej powiedzieć: zawierający blok) absolutnie element pozycjonowany nie jest koniecznie jego bezpośrednim rodzicem, ale raczej jego bezpośrednim pozycjonowanym elementem tj. każdy element, którego pozycja jest ustawiona na cokolwiek oprócz static na przykład position: relative/absolute/fixed/sticky;

Stąd, w miarę możliwości w Twój kod, jeśli chcesz, aby 3rd div element był absolutnie umieszczony w odniesieniu do 1st div powinieneś umieścić swój 2nd div element jako position: static;, który jest jego wartością domyślną (lub po prostu usuń dowolną position: ... deklarację z zestawu reguł twojego 2nd div element).

Powyższe spowoduje, że 1. div zawierający blok 3. absolutnie pozycjonowany div, ignorując 2. div w tym celu pozycjonowania.

Na wypadek, gdyby ktoś nadal szukał odpowiedzi na to pytanie.

Udało mi się osiągnąć ten wynik, dodając styl clear: both; do pierwszego absolutnie pozycjonowanego div, który resetuje dziecko i pozwala mu używać własnego pozycjonowania absolute.