Зупиніть втрачати свої елементи на екрані, розуміючи, як об’єкт фігурує там, де він повинен сидіти
Позиціонування елемента абсолютно більше стосується положення контейнера елемента, ніж його власного. Щоб мати можливість позиціонувати себе, він повинен знати, до якого батьківського 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.
