Css position sticky top

Прилипающий блок CSS

Элемент с position: sticky; фиксируется в рамках ближайшего родителя, когда расстояние до границы ближайшего прокручиваемого родителя достигает указанного в свойствах top , right , bottom , left значения. На то, в каком месте элемент прикрепится и где отцепиться, также влияют свойства padding , margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .

После того, как свойство position примет значение sticky , размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.

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

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Прилипну, сделав отступ в -2em от верхнего края окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента на более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

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

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.

 .raz < border: 1px solid red; >.sticky < position: sticky; top: -2em; margin-bottom: -2em; padding-top: 2em; > .sticky div 1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

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

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

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

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

 .raz < border: 1px solid red; >.sticky < position: sticky; top: 0; min-height: 2em; background: lightpink; >.relative 1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

 .raz < border: 1px solid red; >.sticky < position: sticky; top: 0; z-index: 1; min-height: 2em; background: lightpink; > .relative 1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12

 .raz < overflow: auto; /* добавить полосу прокрутки */ height: 10em; border: 1px solid red; > .sticky 1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Почему не работает position: sticky;

Высота элемента с position: sticky; равна высоте ближайшего родителя

 .raz < overflow: auto; height: 10em; border: 1px solid red; >.sticky 1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Достигнуто конечное положение

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

У не прокручиваемого родителя, стоящего внутри прокручиваемого, определён overflow отличный от visible

 .raz < overflow: auto; height: 10em; border: 1px solid red; >.sticky 
1 
2 
3 4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15
 

Все четыре свойства top , right , bottom , left имеют значение по умолчанию auto

 .raz < overflow: auto; height: 10em; border: 1px solid red; >.sticky 1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Примеры

Как сделать плавающий блок на сайте: меню, баннер

  
Название
  
Основная часть
 
 
  

Как закрепить шапку HTML-таблицы

    Заголовок Заголовок Заголовок  Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка
Название таблицы
 

Как расположить HTML-картинки в одну строку с прикрепляющимся слева описанием

 .raz < overflow: auto; border: 1px solid red; white-space: nowrap; /* не переносить на другую строку inline-элемент */ > .raz figure < display: inline-flex; margin: 0; >.raz figcaption < position: sticky; left: 0; /* для IE */ writing-mode: tb-rl; /* для Mozilla Firefox */ width: 1em; padding: 1em; line-height: 1; writing-mode: vertical-rl; /* перевернуть текст */ text-align: center; /* выравнять текст по середине */ background: rgba(255,255,255,.9); > .raz img 
 
 
 
 
 
 
 
 
  
 
 

Источник

position : sticky

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

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

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

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

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

Источник

Как позиционировать элементы в CSS. Свойство position

Чтобы создавать сложные макеты или интерактивные элементы, нужно управлять местоположением элементов на странице. Для этого есть CSS-свойство position . Оно определяет, где находится элемент на веб-странице.

⭐ Поддержка браузерами свойства position

Значения свойства position

• static — значение по умолчанию, элемент позиционируется в соответствии с его местом в потоке документа;
• relative — элемент позиционируется относительно своего исходного положения в потоке документа;
• absolute — элемент позиционируется относительно ближайшего родительского элемента, который имеет позиционирование, отличное от static ;
• fixed — элемент позиционируется относительно окна браузера;
• sticky — элемент остаётся на месте при прокрутке страницы, но при этом может быть отодвинут от своей стандартной позиции.

Static

Static является значением по умолчанию для всех элементов и будет отображаться на странице в соответствии с порядком элемента в документе. Это значение используется редко и, как правило, не требует дополнительных параметров.

Пример использования свойства position со значением static .

Первый блок
 
Второй
 
Третий
 
Четвёртый
 

Relative

Relative определяет позиционирование элемента относительно его стандартного местоположения на странице. При использовании этого значения можно задать дополнительные параметры, такие как top , bottom , left и right , которые указывают на смещение элемента относительно его стандартного местоположения.

Пример использования свойства position со значением relative .

Absolute

Absolute задаёт точное местоположение элемента на странице, независимо от других элементов на странице. При использовании значения можно задать параметры top , bottom , left и right , чтобы определить точное местоположение элемента.

Пример использования свойства position со значением absolute .

Fixed

Fixed задаёт элемент на фиксированном месте на странице, независимо от прокрутки страницы. При использовании этого значения также можно задать параметры top , bottom , left и right , чтобы определить точное местоположение элемента.

Пример использования свойства position со значением fixed .

Sticky

Sticky начинает себя вести как обычный элемент до тех пор, пока не достигнет определенной позиции на странице, которую вы зададите с помощью свойства ** top , right , bottom или left . Как только элемент достигнет этой позиции при прокрутке страницы, он зафиксируется на месте и будет оставаться там до тех пор, пока пользователь не доскроллит страницу обратно.

Пример использования свойства position со значением sticky .

Нюансы использования

• Если у элемента значение свойства position установлено в absolute или fixed , то такой элемент будет выведен из обычного потока документа и может перекрыть другие элементы. Если это не предполагается, то нужно следить за порядком элементов на странице и настройками z-index .
• Если у элемента значение свойства position установлено в relative , то это не влияет на позиции других элементов на странице.
• Значение свойства position может также влиять на поведение других свойств, например, на позиционирование через top , left , bottom и right .
• Использование свойства position вместе с другими свойствами, например, transform или display , может дать неожиданные результаты и требует более тщательного тестирования на разных браузерах и устройствах.
• Значение sticky может привести к проблемам с доступностью. Если элемент со значением sticky перекрывает другие элементы на странице, это может затруднить доступ к этим элементам для людей, использующих скринридеры.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник