КодSEOБлогИное

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

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

Элемент с 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
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 2em;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Прилипну, сделав отступ в -2em от верхнего края окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента на более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: -2em;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  margin: 2em;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: -2em;
  margin-bottom: -2em;
  padding-top: 2em;
}
.sticky div {
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div style="margin-bottom: -2em;"></div>
  <div class="sticky">
    <div></div>
  </div>
  <div style="margin-top: 2em;"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  transform: translate(0, 2em);
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
  padding: 2em;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
Прилипну к нижнему краю окна браузера, когда нижний край окна браузера будет ниже верхнего края ближайшего родителя, а нижний край элемента — выше своего первоначального расположения.
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  bottom: 0;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  <div class="sticky"></div>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
4
5
6
7
Прилипну то к нижнему краю окна браузера, то к верхнему
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  bottom: 0;  /* не рекомендуется для высоких элементов, так как на коротких устройствах он загородит собой информацию родителя */ 
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  4<br>
  5<br>
  6<br>
  7<br>
  <div class="sticky"></div>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Буду показан под зелёным блоком.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}
.relative {
  position: relative;
  min-height: 6em;
  background: green;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  <div class="relative"></div>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Буду показан над зелёным блоком.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 2em;
  background: lightpink;
}
.relative {
  position: relative;
  min-height: 6em;
  background: green;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  <div class="relative"></div>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Cправа
4
5
6
7
8
9
10
11
12 
<style>
.raz {
  position: relative;
  margin-right: 4em;
  border: 1px solid red;
}
.absolute {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  visibility: hidden;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  visibility: visible;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="absolute">
    <div class="sticky"></div>
  </div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
</div>
1
2
3
Прилипну внутри блока, который можно проскроллить, а не к краю окна браузера
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  overflow: auto;  /* добавить полосу прокрутки */ 
  height: 10em;
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>

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

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

1
2
3
Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  overflow: auto;
  height: 10em;
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div>
    <div class="sticky"></div>
  </div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Не прилипну
<style>
.raz {
  overflow: auto;
  height: 10em;
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
  <div class="sticky"></div>
</div>

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

1
2
3
Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  overflow: auto;
  height: 10em;
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3
  <div style="overflow: hidden;">
    <div class="sticky"></div>
    4<br>
    5<br>
    6<br>
    7<br>
    8<br>
    9<br>
    10<br>
    11<br>
    12<br>
    13<br>
    14<br>
    15<br>
  </div>
</div>

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

1
2
3
Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  overflow: auto;
  height: 10em;
  border: 1px solid red;
}
.sticky {
  position: sticky;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>

Примеры

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

полноэкранный пример
<style>
header, nav, article, aside, footer {
  border: 1px solid gray;
}
header, nav, article, aside {
  margin-bottom: 1em;
}
article, footer {
  min-height: 100vh;
}
aside {
  min-height: 20vh;
}
@supports (display: grid) {
  @media (min-width: 20em) {
    body {
      display: grid;
      grid-template-columns: 1fr minmax(0, 40em) 1em minmax(0, 15em) 1fr;
      grid-template-rows: repeat(3, auto 1em) 1fr 1em auto;
    }
    header, nav, article, aside {
      margin: 0;
    }
    header, footer, nav {
      grid-column: 2/5;
    }
    nav {
      grid-row: 3/4;  
    }
    article {
      grid-column: 2/3;
      grid-row: 5/8;
    }
    [id^="right"] {
      grid-column: 4/5;
    }
    #right1 {
      grid-row: 5/6;
    }
    #right2 {
      grid-row: 7/8;
    }
    .sticky {
      position: sticky;
      top: 0;
    }
    footer {
      grid-row: 9/10;
    }
  }
}
</style>

<header>Название</header>
<nav>Меню</nav>
<article>Основная часть</article>
<div id="right2">
  <aside class="sticky">Прилипающая часть</aside>
</div>
<aside id="right1">Вспомогательная часть</aside>
<footer>Подвал</footer>

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

Название таблицы
Заголовок Заголовок Заголовок
Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка 
<style>
.raz {
  border: 1px solid red;
}
.raz th {
  position: sticky;
  top: 0;
  background: lightpink;
}
</style>

<table class="raz">
  <caption>Название таблицы</caption>
  <thead>
    <tr>
       <th>Заголовок
       <th>Заголовок
       <th>Заголовок
  <tbody>
    <tr>
       <td>Ячейка
       <td>Ячейка
       <td>Ячейка
    <tr>
       <td>Ячейка
       <td>Ячейка
       <td>Ячейка
    <tr>
       <td>Ячейка
       <td>Ячейка
       <td>Ячейка
    <tr>
       <td>Ячейка
       <td>Ячейка
       <td>Ячейка
</table>

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

Поле ромашек
Поле ромашек
Отражение котёнка
Отражение котёнка
Медвежата у реки
Медвежата у реки
Весёлый паровозик
Весёлый паровозик
Планета Земля
Планета Земля 
<style>
.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 {
  height: 300px;
}
</style>

<div class="raz">
  <figure>
    <figcaption>Поле ромашек</figcaption>
    <img src="http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s450/romashki.jpg" alt="Поле ромашек">
  </figure><figure>
    <figcaption>Отражение котёнка</figcaption>
    <img src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s300/mechty.jpg" alt="Отражение котёнка">
  </figure><figure>
    <figcaption>Медвежата у реки</figcaption>
    <img src="http://img-fotki.yandex.ru/get/4414/63641203.16/0_6c04a_2e684832_M" alt="Медвежата у реки">
  </figure><figure>
    <figcaption>Весёлый паровозик</figcaption>
    <img src="http://4.bp.blogspot.com/-Nq5KPM8uNjk/UFbSS3v0Z5I/AAAAAAAADNQ/3MxRKB-jfqo/s390/parovozik.jpg" alt="Весёлый паровозик">
  </figure>
  </figure><figure>
    <figcaption>Планета Земля</figcaption>
    <img src="http://4.bp.blogspot.com/-nPTLkC1HEzU/UyhFH_hLSzI/AAAAAAAAERU/NvtlJ8yKYRk/s400/planeta.jpg" alt="Планета Земля">
  </figure>
</div>
◄▲►
Все комментарии