Абсолютне позиціонування в CSS
Використання абсолютного позиціонування видаляє елемент із стандартного потоку документа, дозволяючи іншим сусіднім елементам займати його місце. Значення позиціонування елемента top, left, bottom та right обчислюються відносно найближчого предка з не-статичним позиціонуванням. Якщо такого предка немає, значення визначаються від меж елемента <body>.
position: absolute;
Зазвичай абсолютне позиціонування використовують у поєднанні з відносним позиціонуванням, оскільки потрібно розмістити елемент відносно іншого елемента у потоці документа.
Розгляньте наступний приклад. Завдання — розмістити назву міста (елемент <span> з класом description) у верхньому правому куті картки міста (елемент <div> з класом card). Зверніть увагу на властивість position для різних елементів.
index.html
index.css
У цьому прикладі елементи .description розташовані абсолютно всередині елементів .card завдяки застосуванню position: relative; до .card. Таке позиціонування розміщує назви міст у верхньому правому куті кожної картки.
Можна перемістити елемент відносно іншого елемента. Як це працює? Необхідно застосувати position: relative; до елемента-предка того елемента, який потрібно розташувати абсолютно. В іншому випадку елемент буде позиціонуватися відносно елемента <body>.
Примітка
При вказанні властивостей
top,left,rightтаbottomдля абсолютно позиціонованого елемента, браузер обчислює їх, починаючи від меж відносно позиціонованого елемента. Це можна розглядати як застосування відступу до дочірнього елемента всередині батьківського елемента.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain the difference between absolute and relative positioning?
How do I use absolute positioning to place an element in a specific corner?
What happens if I don't set position: relative on the parent element?
Awesome!
Completion rate improved to 2.04Абсолютне позиціонування в CSS
Свайпніть щоб показати меню
Використання абсолютного позиціонування видаляє елемент із стандартного потоку документа, дозволяючи іншим сусіднім елементам займати його місце. Значення позиціонування елемента top, left, bottom та right обчислюються відносно найближчого предка з не-статичним позиціонуванням. Якщо такого предка немає, значення визначаються від меж елемента <body>.
position: absolute;
Зазвичай абсолютне позиціонування використовують у поєднанні з відносним позиціонуванням, оскільки потрібно розмістити елемент відносно іншого елемента у потоці документа.
Розгляньте наступний приклад. Завдання — розмістити назву міста (елемент <span> з класом description) у верхньому правому куті картки міста (елемент <div> з класом card). Зверніть увагу на властивість position для різних елементів.
index.html
index.css
У цьому прикладі елементи .description розташовані абсолютно всередині елементів .card завдяки застосуванню position: relative; до .card. Таке позиціонування розміщує назви міст у верхньому правому куті кожної картки.
Можна перемістити елемент відносно іншого елемента. Як це працює? Необхідно застосувати position: relative; до елемента-предка того елемента, який потрібно розташувати абсолютно. В іншому випадку елемент буде позиціонуватися відносно елемента <body>.
Примітка
При вказанні властивостей
top,left,rightтаbottomдля абсолютно позиціонованого елемента, браузер обчислює їх, починаючи від меж відносно позиціонованого елемента. Це можна розглядати як застосування відступу до дочірнього елемента всередині батьківського елемента.
Дякуємо за ваш відгук!
