Как закрепить элемент при прокрутке html

Как работает position: fixed;

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

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

«Приклеить» элемент, чтобы он не менял своего положения при прокрутке страницы

Элемент с position: fixed; не влияет на размер родителя.

  
static 
 
fixed 

Элемент с position: fixed; не влияет на положение соседей: цифры 20, 21, 22, … смещаются к цифре 19.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 static 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 fixed 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

В отличии от элемента с position: absolute; без родителя с position не static , элемент с position: fixed; не меняет своего положения при скроллинге.

  absolute fixed

При отсутствии свойств top , right , bottom , left элемент фиксируется на том месте окна браузера либо iframe , на котором находился до прокрутки. Его не увидеть, если он был ниже области, видимой без прокрутки.

  
fixed 
 
fixed 
 
 fixed 

Расположить элемент с position: fixed; относительно области просмотра окна браузера, iframe и т. п.

область просмотра
элемент
position: fixed;

Свойства top , right , bottom , left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto .

  top right bottom left auto

Значения свойств height , top и bottom в процентах рассчитываются от высоты области просмотра. Свойство height в процентах не заменяется на height: auto; , даже когда ближайший родитель имеет height: auto; . Значения свойств width , margin , padding , left и right в процентах рассчитываются от ширины области просмотра.

Ширина и высота элемента с position: fixed; относительно области просмотра

Ширина элемента с position: fixed; без явно заданного значения устанавливается по содержимому. Элементы с display не block и position: fixed; ведут себя как элементы с display: block; и position: fixed; .

position: fixed; блочного position: fixed; строчного

  
Блочный
 Строчный

Без явно заданной ширины и/или высоты размер элемента определяется расстоянием от left не auto до right не auto и/или от top не auto до bottom не auto (для IE8+).

border: .5em solid fuchsia; padding: 1em;

  
Элемент

Стили, чтобы растянуть блок на всю ширину и высоту области просмотра окна браузера, iframe и т. п.:

left: 0; right: 0; top: 0; bottom: 0; /* или */ left: 0; right: 0; width: 100%; height: 100%; box-sizing: border-box;

С ограниченной шириной и/или высотой расстояние от left не auto до right не auto и/или от top не auto до bottom не auto определяет область, в рамках которой может перемещаться элемент с margin: auto; (для того, чтобы передвинуть элемент в центр верхней правой 1/4 части родителя см., left: 50%; right: 0; top: 0; bottom: 50%; ). Если расстояние от left не auto до right не auto меньше width , то свойство right игнорируется (см., left: 50%; right: 50%; ).

border: .5em solid fuchsia; padding: 1em;

  
Элемент

position: fixed; и overflow не visible

Выходящая за границы родителя с overflow отличным от visible часть элемента с position: fixed; не будет скрыта. Даже если она выйдет за рамки области просмотра, горизонтальная или вертикальная полоса прокрутки не появится.

  
Элемент 

position: fixed; и clip-path или clip

Свойство clip не рекомендуется использовать, так как оно устарело. Ему на смену пришло clip-path . Элемент с position: fixed; не выходит за рамки родителя с одним из них.

 /* серым выделено то, что нужно только для clip, так как он работает лишь совместно с position: absolute; */ body < height: 500vh; >.parent .absolute < position: absolute; width: 100%; box-sizing: border-box; height: 5em; border: 1px solid red; clip: rect(0, auto, auto, 0); /* весь периметр родителя */ clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); /* весь периметр родителя */ > .fixed < /* одинаковое положение для обоих элементов */ position: fixed; top: 1em; left: 5%; > .fixed.red < background: red; >.fixed.lightpink 
Зафиксированный
 
 
Зафиксированный
 
 

position: fixed; не работает, когда у родителя свойства transform , perspective , filter или will-change имеют значение не none

Элемент с position: fixed; ведёт себя как элемент с position: absolute; относительно ближайшего родителя с transform , perspective , filter или will-change не none . Они создают новый контекст наложения. В браузерах разночтение.

нет нижеприведённых transform: translateX(0); filter: blur(0); perspective: 0; will-change: transform;

 body < height: 500vh; >div > span < position: fixed; right: 0; background: lightpink; > 
Элемент 

div по центру экрана

Вариант, который работает почти во всех версиях браузеров.

 #fixed < position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; text-align: center; background: rgba(0,0,0,.7); /* IE+9 */ > #fixed:before < /* IE+8 */ content: ""; display: inline-block; height: 100%; vertical-align: middle; > .fixed 
 
содержание
 

• position: fixed; относительно своего родителя
• Зафиксировать div при прокрутке на CSS и/или JS
• Кнопка «Вверх» для сайта
• Lightbox на CSS

illyuziya Классно! А я всё думала, как «прилепляют» кнопочки и т.п. к краям экрана. Спасибо за «Шпаргалку. » — работа проделана колоссальная, а главное нужная. Анонимный Как сделать липкий слой чтобы находился рядом с основным блоком? NMitra Посмотрите, пожалуйста, возможные образцы.

Как закрепить блок при прокрутке страницы

Блок со свойством position: sticky; при прокрутке страницы закрепляется относительно окна браузера опираясь на заданные значения top и/или left , при этом взаимодействует с другими элементами и закрепляется только тогда, когда родительский блок находится в отображаемом окне браузера и закрепленному элементу достаточно места в родительском блоке

Важно понять что для элемента с position: sticky; необходим родительский элемент, у которого будет свободное пространство для закрепленного элемента, если этого пространства нет, то блок со свойством position: sticky; будет вести себя как при position: static; установленном по-умолчанию для всех элементов

Еще раз для наглядности:

 
 
 
 
 
 
Lorem ipsum dolor sit amet, consectetur.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur quos veritatis distinctio est ipsam repudiandae vel totam asperiores quas! Debitis quam voluptate fuga iure ut deleniti, illum laborum quaerat aut.
 
 
 
 
 

.sticky__half < width: 50%; min-height: 800px; border: 10px solid #000; >.sticky__body

1. Блоку заданы свойства position: sticky; и top: 100px;
2. Блок находится в родительском блоке
3. Высота блока меньше высоты родительского блока

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

Отличие от position: fixed;

При position: fixed; элемент никак не взаимодействует с другими элементами, он позиционируется относительно окна браузера отдельно от остальных элементов

Свойство position: fixed; полезно если элемент всегда должен находится в пределах окна браузера и не должен взаимодействовать с другими элементами, например, при верстке кнопки “Наверх” для возврата к началу страницы, которую обычно располагают справа внизу относительно окна браузера — она всегда видна и не затрагивает остальные элементы

Как закрепить шапку сайта

  
Sticky
 
  

.header < position: -webkit-sticky; position: sticky /* Закрепляем элемент */; top: 0 /* Указывем на каком расстоянии от верха браузера будет крепиться шапка сайта */; >

Блоку добавляем свойство position: sticky; и top: 0; . Родительским элемент для блока является , поэтому при прокрутке страницы блок закрепляется к самому верху окна браузера, пока body будет оставаться в пределах отображаемого окна браузера, а так как основной родительский элемент для всей страницы, то блок будет всегда закреплен к верху окна браузера

Если будем закрелять шапку сайта свойством position: fixed; , то шапка сайта не будет взаимодействовать с другими элементами и следующие за шапкой элементы будут перекрыты шапкой или шапка будет перекрыта следующими элементами в зависимости от z-index .

Свойство position: sticky; поддерживается во всех браузерах, кроме Internet Explorer. В Internet Explorer верстка не ломается, просто элементы остаются по умолчанию position: static; и будут прокручиваться не закрепляясь, поэтому можно использовать данный прием в проектах.

Ссылка на документацию по position — MDN web docs

как зафиксировать блок в блоке со скролом при прокрутке?

имеется блок div со скроллом. внутри него много текста и блок, который должен быть зафиксирован при скролле. как это сделать?

 
text
 . 
text
 
 

Были попытки дать fixed-block position: fixed , но он становится фиксированным относительно окна браузера.
Были попытки дать fixed-block position: absolute , блок становиться поверх всего текста (как мне и надо), но но при скролле он тоже улетает.
как быть?

Отслеживать
задан 28 ноя 2018 в 16:21
Ilya Nikulin Ilya Nikulin
101 1 1 серебряный знак 8 8 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вы можете создать контейнер для скролла, и уже в нем располагать элементы абсолютно. Например, так:

div.container < width: 100%; height: 100px; position: relative; >div.scroll < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow-y: scroll; >div.fixed-block

 
 
Не поддавайтесь панике, даже если очень хочется. В самых разных уголках мира маглов вдруг начали появляться следы волшебства. Мы беспокоимся, что в скором времени это заметят даже крайне безразличные маглы. Волшебники и волшебницы, нам нужна ваша помощь!
 
Если не обуздать это бедствие, наступят страшные времена, как сами знаете когда при Сами-Знаете-Ком. Повторите знакомые вам заклинания, берите палочку и вступайте в наши ряды!
 
 

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

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

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

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

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

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

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

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

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

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

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

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

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

 .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.

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

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

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

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

  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

Буду показан под зелёным блоком.
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

Буду показан над зелёным блоком.
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

4
5
6
7
8
9
10
11
12

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

Прилипну внутри блока, который можно проскроллить, а не к краю окна браузера
4
5
6
7
8
9
10
11
12
13
14
15

 .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; равна высоте ближайшего родителя

Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15

 .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
Не прилипну

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

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

Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15

 .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

Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15

 .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