Зупиніть втрачати свої елементи на екрані, розуміючи, як об’єкт фігурує там, де він повинен сидіти

Позиціонування елемента абсолютно більше стосується положення контейнера елемента, ніж його власного. Щоб мати можливість позиціонувати себе, він повинен знати, до якого батьківського div він буде позиціонуватись відносно.
У наведеному нижче коді показано чотири вкладені div. .box-1
щоб .box-3
бути відцентрованими лише display: flex
і margin: auto
лише. .box-4
не margin
встановлено, і він сидить у своєму типовому положенні в документообігу.
position
Властивість не задано для всіх елементів.
body { display: flex;}
.box-1,.box-2,.box-3 { display: flex; margin: auto;}

Щоб мати можливість позиціонувати себе, елемент повинен знати дві речі:
- координати для її
x
іy
набору положення або шляхомtop
,right
,bottom
,left
- якому батьків він буде позиціонувати себе
При нанесенні position: absolute
на .box-4
елемент знімається з normal document flow
. Оскільки його координати не встановлені, він просто залишається в типовому положенні, яке є його батьківським div у верхньому лівому куті.

Встановивши top: 0
і left: 0
елемент, тоді повинен знати, кого з батьків він буде вважати орієнтиром. Щоб бути еталоном, елемент повинен розташовуватися на екрані за допомогою position: relative
. .box-4
потім починає запитувати батьківські div, чи вони розташовані. Спочатку він запитує .box-3
і отримує No, I am not positioned.
як відповідь. Те саме стосується .box-2
і тоді .box-1
, оскільки всі вони мають position: unset
.
Оскільки .box-4
не вдалося знайти позиціонованого батька, він позиціонує себе відносно body
. Цей елемент завжди розташовується на екрані:

Якщо ми встановимо position: relative
на .box-1
, коли .box-4
запитує: Are you positioned?
це отримує Yes I am.
як відповідь. А потім .box-4
буде позиціонуватися щодо .box-1
:

Те саме стосується .box-2
і .box-3
.
Абсолютно позиціонований елемент розташуватиметься відносно найближчого позиціонованого предка.
Як тільки він знаходить позиціонованого предка, положення елементів вище цього вже не є актуальним. Зображення нижче показують розташування по налаштуванню position: relative
до .box-2
і .box-3
, відповідно:


Ви також можете знайти відео пояснення на Code Sketch Channel?.
Дякуємо за читання! ✌️
Спочатку опубліковано на marina-ferreira.github.io.
