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

bookЛипке позиціонування для динамічних макетів

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

position: sticky;

Розглянемо наступну ілюстрацію. Елемент з текстом I am sticky має sticky позиціонування.

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

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

index.html

index.html

index.css

index.css

copy

Примітка

Важливо зазначити, що необхідно вказати властивість top або bottom, щоб браузер розумів, де саме має закріплюватися елемент.

question mark

Яка поведінка елемента з властивістю position: sticky?

Select the correct answer

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

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

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Suggested prompts:

Can you show me an example of how to use sticky positioning with section titles?

What does the CSS look like for making section titles sticky?

Can you explain more about the importance of the `top` or `bottom` property with sticky positioning?

Awesome!

Completion rate improved to 2.04

bookЛипке позиціонування для динамічних макетів

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

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

position: sticky;

Розглянемо наступну ілюстрацію. Елемент з текстом I am sticky має sticky позиціонування.

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

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

index.html

index.html

index.css

index.css

copy

Примітка

Важливо зазначити, що необхідно вказати властивість top або bottom, щоб браузер розумів, де саме має закріплюватися елемент.

question mark

Яка поведінка елемента з властивістю position: sticky?

Select the correct answer

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

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

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

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