Относительно чего привязан sticky

Позиционирование position: sticky: Привязка к Ближайшему Прокручиваемому Контейнеру

Ключевая особенность position: sticky заключается в том, что элемент привязывается не к окну браузера (viewport), как fixed, и не к ближайшему родителю с заданной позицией, как absolute. Вместо этого его "залипание" относительно ближайшего прокручиваемого контейнера (или самого окна браузера, если нет другого), внутри которого он находится.

Механизм работы и область привязки

Когда вы задаете элементу position: sticky и указываете одно или несколько "залипающих" краев (например, top: 10px), его поведение становится гибридным:

1. Обычное положение в потоке: Элемент первоначально располагается в документе согласно нормальному потоку (static) или своей позиции.
2. Переход в "залипающее" состояние: Когда пользователь начинает прокрутку, и расстояние между заданным краем элемента (например, верхним) и соответствующим краем его ближайшего прокручиваемого контейнера становится меньше или равно указанному значению (например, top: 10px), элемент "залипает".
3. Отмена залипания: Элемент продолжает "залипать" до тех пор, пока его родительский контейнер (или сам элемент) не выйдет за пределы видимой области прокручиваемого контейнера. Например, если sticky элемент находится внутри блока с высотой 500px, и этот блок полностью прокручивается, элемент "отпускается" вместе с ним.

Ближайший прокручиваемый контейнер (Scrollport)

Это самый важный нюанс. "Прокручиваемый контейнер" определяется как ближайший родительский элемент, который имеет overflow (или overflow-x, overflow-y) со значением, отличающимся от visible. Это может быть:

• Окно браузера (viewport) — если ни один родитель не имеет overflow: hidden | auto | scroll.
• Любой элемент с overflow: auto, scroll, hidden.
• Элемент с display: flex или grid, где переполнение контента может создавать внутреннюю прокрутку.

Практический пример и код

Рассмотрим классический пример — залипающая шапка таблицы внутри прокручиваемого контейнера.

<!-- Контейнер с ограниченной высотой и прокруткой -->
<div class="scroll-container" style="height: 300px; overflow: auto;">
  <table>
    <thead>
      <tr>
        <!-- Залипающие заголовки колонок -->
        <th style="position: sticky; top: 0;">Имя</th>
        <th style="position: sticky; top: 0;">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Алексей</td><td>alex@example.com</td></tr>
      <!-- ... много строк ... -->
    </tbody>
  </table>
</div>

.scroll-container {
  border: 1px solid #ccc;
}

th {
  background-color: #f1f1f1;
  /* top: 0 означает: "залипнуть, когда расстояние до верхнего края .scroll-container станет 0px" */
}

В этом примере:

• Контейнер .scroll-container является ближайшим прокручиваемым контейнером для <th>.
• При прокрутке внутри .scroll-container, заголовки таблицы (<th>) будут залипать у верхнего края этого контейнера, а не у верхнего края всей страницы.
• Если мы удалим overflow: auto у .scroll-container (или установим overflow: visible), тогда ближайшим прокручиваемым контейнером станет окно браузера, и <th> будут залипать относительно него.

Ключевые ограничения и особенности

• Родительские границы: sticky элемент не может "залипать" за пределы своего родительского контейнера. Если родительский блок (например, <thead> или <div>) полностью прокручивается и исчезает из видимой области, sticky элемент исчезает вместе с ним.
• Множественные края: Можно задать залипание для нескольких краев одновременно (top, bottom, left, right), что полезно для создания "залипающих" боковых панелей или элементов в двух направлениях.
• Z-index и stacking context: Чтобы sticky элемент не был перекрыт другими элементами при прокрутке, часто требуется управлять z-index.
• Поддержка в старых браузерах: Необходимо учитывать поддержку, особенно в некоторых версиях IE/Edge.

Таким образом, при использовании position: sticky всегда анализируйте структуру DOM и проверяйте свойства overflow на родительских элементах, чтобы точно понять, относительно какой области будет происходить залипание. Это фундаментальное отличие от других типов позиционирования.