position: sticky

Уникальное позиционирование, которое создаёт липкий элемент.

Время чтения: меньше 5 мин

Кратко

Скопировано

Элемент с position: sticky «прилипает» к экрану при прокрутке, пока не встретится с границей родительского блока.

Пример

Скопировано

Сделаем «липкий» заголовок, а также «липкий» блок в правом нижнем углу для каждого из <section>:

        
          
          h1 {  position: sticky;  top: 15px;}.squares__item:last-of-type {  position: sticky;  bottom: 15px;}
          h1 {
  position: sticky;
  top: 15px;
}

.squares__item:last-of-type {
  position: sticky;
  bottom: 15px;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как понять

Скопировано

Блоки с «липким» позиционированием ведут себя как position: relative и position: fixed одновременно. Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position: fixed. А когда он встретится с противоположным краем родителя, то снова будет вести себя, как position: relative.

Как пишется

Скопировано
        
          
          .block {  position: sticky;  top: 15px;}
          .block {
  position: sticky;
  top: 15px;
}

        
        
          
        
      

Для блока, который должен быть «липко» позиционирован, указываем position: sticky и позицию относительно окна браузера. В этом примере блок «прилипнет» на расстоянии 15 пикселей от верхнего края окна.

Подсказки

Скопировано

💡 Если нужный элемент занимает всю высоту родительского блока (если он один в блоке или просто самый высокий среди соседних элементов), то position: sticky не сработает.

💡 При вертикальном скролле работают только свойства top и bottom, при горизонтальном — left и right. Или их логические аналоги inset.

💡 position: sticky можно указать внутри родителя с overflow: scroll или overflow: auto.

💡 Если элементу указать большее число пикселей, чем позволяет родитель, то элемент сразу встанет к противоположному краю родительского блока, но за пределы блока не выйдет.

На практике

Скопировано

Лена Райан советует

Скопировано

🛠 С помощью такого позиционирования удобно делать закреплённую шапку — если она является непосредственным наследником body, то, указав шапке position: sticky, мы получим статичную шапку при загрузке экрана, а при скролле страницы — зафиксированную сверху.