Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Абсолютне позиціонування в CSS | Володіння Позиціонуванням у CSS
Просунуті техніки CSS

bookАбсолютне позиціонування в CSS

Використання абсолютного позиціонування видаляє елемент із стандартного потоку документа, дозволяючи іншим сусіднім елементам займати його місце. Значення позиціонування елемента top, left, bottom та right обчислюються відносно найближчого предка з не-статичним позиціонуванням. Якщо такого предка немає, значення визначаються від меж елемента <body>.

position: absolute;

Зазвичай абсолютне позиціонування використовують у поєднанні з відносним позиціонуванням, оскільки потрібно розмістити елемент відносно іншого елемента у потоці документа.

Розгляньте наступний приклад. Завдання — розмістити назву міста (елемент <span> з класом description) у верхньому правому куті картки міста (елемент <div> з класом card). Зверніть увагу на властивість position для різних елементів.

index.html

index.html

index.css

index.css

copy

У цьому прикладі елементи .description розташовані абсолютно всередині елементів .card завдяки застосуванню position: relative; до .card. Таке позиціонування розміщує назви міст у верхньому правому куті кожної картки.

Можна перемістити елемент відносно іншого елемента. Як це працює? Необхідно застосувати position: relative; до елемента-предка того елемента, який потрібно розташувати абсолютно. В іншому випадку елемент буде позиціонуватися відносно елемента <body>.

Примітка

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

question mark

Що відбувається з позицією елемента, коли ми застосовуємо position: absolute?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 4

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

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

bookАбсолютне позиціонування в CSS

Свайпніть щоб показати меню

Використання абсолютного позиціонування видаляє елемент із стандартного потоку документа, дозволяючи іншим сусіднім елементам займати його місце. Значення позиціонування елемента top, left, bottom та right обчислюються відносно найближчого предка з не-статичним позиціонуванням. Якщо такого предка немає, значення визначаються від меж елемента <body>.

position: absolute;

Зазвичай абсолютне позиціонування використовують у поєднанні з відносним позиціонуванням, оскільки потрібно розмістити елемент відносно іншого елемента у потоці документа.

Розгляньте наступний приклад. Завдання — розмістити назву міста (елемент <span> з класом description) у верхньому правому куті картки міста (елемент <div> з класом card). Зверніть увагу на властивість position для різних елементів.

index.html

index.html

index.css

index.css

copy

У цьому прикладі елементи .description розташовані абсолютно всередині елементів .card завдяки застосуванню position: relative; до .card. Таке позиціонування розміщує назви міст у верхньому правому куті кожної картки.

Можна перемістити елемент відносно іншого елемента. Як це працює? Необхідно застосувати position: relative; до елемента-предка того елемента, який потрібно розташувати абсолютно. В іншому випадку елемент буде позиціонуватися відносно елемента <body>.

Примітка

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

question mark

Що відбувається з позицією елемента, коли ми застосовуємо position: absolute?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 4
some-alt