Bezwzględne pozycjonowanie wewnątrz pozycji bezwzględnej

Mam 3 divelementy.

Pierwszy divjest większy (zawijany) i maposition:relative;

Druga divjest pozycjonowana bezwzględnie divwzględem pierwszej pozycji względnej (i jest zawarta w pierwszej pozycji div)

Trzeci divjest zawarty w drugim divi ma również pozycjonowanie bezwzględne.

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

Dlaczego trzecia divpozycja jest bezwzględna w stosunku do drugiej div(która jest również bezwzględną pozycją w stosunku do pierwszej div), a nie do pierwszej, divktóra ma pozycję względną?

Ponieważ trzecia divjest pozycją bezwzględną do bezwzględnej pozycji drugiej div.

Ponieważ position: absoluteresetuje względną pozycję dla dzieci, tak samo jak to position: relativerobi.

Nie divda się tego obejść - jeśli chcesz, aby trzeci był ustawiony absolutnie względem pierwszego, będziesz musiał uczynić go dzieckiem pierwszego.

Zarówno position:relativeiposition:absolute ustal elementy zawierające jako przodków pozycjonujących.

Jeśli chcesz ustawić div 3 na podstawie div 1, ustaw go jako bezpośredni element potomny div 1.

Zauważ, że position: relativeoznacza to, że element jest umieszczony względem jego naturalnego położenia i position: absoluteoznacza, że ​​element jest umieszczony względem swojego pierwszego position:relativelub position:absoluteprzodka .

Pozycja statyczna: pozycja statyczna jest domyślnym sposobem wyświetlania elementu w normalnym przepływie pliku HTML, jeśli w ogóle nie określono pozycji.

Ważne: top, right, bottomileft właściwości nie mają wpływu na statycznie elementu pozycjonowanego.

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

Następnie można przejść przez element pewnej ilości wykorzystaniem właściwości left, right, topi bottom. Może to jednak spowodować, że element będzie nakładał się na inne elementy na stronie - co może, ale nie musi, być pożądanym efektem.

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

Pozycja bezwzględna: zastosowanie bezwzględnej wartości położenia do elementu usuwa go z normalnego przepływu. Kiedy przesuwasz element pozycjonowany bezwzględnie, jego punktem odniesienia jest góra / lewo najbliższego elementu zawierającego, który ma zadeklarowaną pozycję inną niż statyczna - nazywana również najbliższym kontekstem pozycjonowania. Tak więc, jeśli nie istnieje element zawierający pozycję inną niż statyczna, zostanie umieszczony od lewego górnego rogu elementu body.

W twoim przypadku najbliższy trzeci pojemnik to drugi.

Jeszcze jedna wyjaśniająca odpowiedź.

Twój obecny scenariusz jest następujący:

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

I trochę się z tym zmagasz.

Jeśli możesz zmienić kod 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, 3rd divelement jest pozycjonowany bezwzględnie do 2. divelementu jest bo jak specyfikacja CSS wyjaśnia tutaj , to dlatego, że element „rodzic” (lepiej powiedzieć: blok zawierający) o absolutnie elementu pozycjonowanego nie koniecznie jego bezpośrednim elementem dominującym, ale raczej jego bezpośredni element pozycjonowany , tj. dowolny element, którego pozycja jest ustawiona na dowolną wartość, ale staticna przykładposition: relative/absolute/fixed/sticky;

Dlatego jeśli to możliwe w twoim kodzie, jeśli chcesz, aby trzeci divelement był absolutnie pozycjonowany względem pierwszego div, powinieneś ustawić drugi divelement jako position: static;jego wartość domyślną (lub po prostu usunąć dowolną position: ...deklarację z zestawu reguł drugiego divelementu) .

Powyższy będzie 1st blok zawierający od 3 całkowicie umieszczona , ignorując 2nd tym celu pozycjonowania.divdivdiv

Mam nadzieję, że to pomoże.

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

Udało mi się osiągnąć ten wynik, dodając clear: both;styl do pierwszego absolutnie pozycjonowanego elementu div, który zresetował dziecko i pozwolił mu użyć własnego absolutepozycjonowania.