Назад Вперед Зміст


Позиціонування елементів у HTML/CSS Sticky

Sticky позиціонування

Sticky - гібрид relative та fixed. Елемент поводиться як relative, доки не досягне певної позиції при прокрутці, потім стає fixed.

Приклад Sticky позиціонування:

Елемент 1
Елемент 3
Елемент 4
Елемент 5
.sticky-menu {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
  padding: 1rem;
  border-bottom: 2px solid #eee;
}

Переваги sticky:

Обмеження:

Sticky не працює, якщо батьківський елемент має overflow: hidden, scroll, або auto. Також потрібна підтримка браузера (не працює в IE).


Назад Вперед Зміст