Абсолютне позиціонування всередині абсолютного положення

У мене 3 divелементи.

1-й divбільший (обгортання) і маєposition:relative;

2-й divпозиціонується абсолютним до 1-го divвідносного позиціонування (і входить до 1-го div)

3-й divміститься у 2-му, divа також має абсолютне позиціонування.

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

Чому 3-я divпозиція абсолютна до 2-ї div(що також є абсолютною позицією до 1-ї div), а не до 1-ї, divяка має відносне положення?

Оскільки 3-е divє абсолютним позиціонуванням до абсолютного позиціонуванням 2-го div.

Тому що position: absoluteскидає відносне положення дітей так само, як position: relativeце робить.

Цього не можна обійти - якщо ви хочете, щоб третій divбув абсолютно позиціонований відносно першого, вам доведеться зробити його дитиною першого.

І те, position:relativeі position:absoluteінше встановлюють містять елементи як позиціонуючих підйомників.

Якщо вам потрібно розмістити div 3 на основі div 1, зробіть його прямим нащадком div 1.

Зверніть увагу, що position: relativeозначає, що елемент позиціонується відносно свого природного положення, і position: absoluteозначає, що елемент розташовується відносно свого першого position:relativeабо position:absoluteпредка .

Позиція статична: статична позиція - це спосіб за замовчуванням відображатиметься елемент у звичайному потоці вашого файлу HTML, якщо жодна позиція не вказана взагалі.

Важливо: top, right, bottomі leftвластивості не впливає на те Статічаском позиціонується.

Позиція відносна: позиціонування елемента з відносним значенням зберігає елемент (і простір, який він займає) у звичайному потоці вашого HTML-файлу.

Потім ви можете перемістити елемент на деяку величину , використовуючи властивості left, right, topі bottom. Однак це може призвести до того, що елемент перекриватиме інші елементи, що знаходяться на сторінці, - що може бути або не бути тим ефектом, який ви хочете.

Порівняно розташований елемент може рухатися зі свого місця, але простір, який він займав, залишається.

Позиція абсолютна: застосування абсолютного значення позиції до елемента виводить його із нормального потоку. Коли ви переміщуєте абсолютний позиціонований елемент, його контрольна точка знаходиться у верхній / лівій частині найближчого елемента, що містить позицію, оголошену відмінною від статичної, що також називається найближчим контекстом позиціонування. Отже, якщо не існує жодного елемента, що містить позицію, відмінну від статичної, то він буде розміщений з лівого верхнього кута елемента тіла.

У вашому випадку найближчий контейнер, що містить 3 місце, є 2-м.

Ще одна уточнююча відповідь.

Ваш поточний сценарій такий:

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

І ти якось борешся з цим.

Якщо ви можете змінити HTML, просто зробіть це:

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

Причина, чому 3-й divелемент абсолютно позиціонується до 2-го divелемента, полягає в тому, що, як тут пояснюється специфікація CSS , тому, що "батьківський" елемент (краще сказати: містить блок) абсолютно розташованого елемента не обов'язково є його безпосереднім батьківським елементом, але скоріше, його безпосередньо позиціонований елемент, тобто будь-який елемент, позиція якого встановлена ​​на що завгодно, крім staticнаприкладposition: relative/absolute/fixed/sticky;

Отже, коли це можливо у вашому коді, якщо ви хочете, щоб 3-й divелемент був абсолютно позиціонований по відношенню до 1-го, divви повинні зробити свій 2-й divелемент як position: static;значення за замовчуванням (або просто видалити будь-яку position: ...декларацію з набору правил вашого 2-го divелемента) .

Вищевказане зробить 1- divй вміщуючий блок 3-го абсолютно позиціонованим div, ігноруючи 2-й divдля цієї позиціонування.

Сподіваюся, це допоможе.

Якщо хтось все ще шукає відповіді на це.

Я зміг досягти цього результату, додавши clear: both;стиль до першого абсолютно розташованого div, який скинув дитину і дозволив їй використовувати власне absoluteпозиціонування.