position: sticky

Элемент с 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, мы получим статичную шапку при загрузке экрана, а при скролле страницы — зафиксированную сверху.