position: fixed

position: fixed меняет структуру поведения элементов. Все элементы position: fixed; находятся в новой позиции.

Оглавление:
  1. Позиция контекста
  2. Спецификация
  3. Прокрутка страницы
  4. Поддержка браузерами position:fixed

Позиция контекста

Каждый кто применяет z-index для определения порядка элементов на странице, знают что z-index определяет позицию относительно других элементов. Большинство элементов на странице имеют корневую позицию, абсолютную или относительную. Свойство z-index формирует свои собственные позиции (т.е. все дочерние элементы будут в корне, но не будут перекрывать содержание корня).

Сравните свойства position: fixed и position: sticky. Напомню что position: sticky; всегда имеет новую позицию в контексте.

к меню ↑

Спецификация

Причины обновления спецификации:

  1. Разное поведение на мобильных и на настольных браузерах.
  2. С планшетами не понятно, какой алгоритм нужно применить, тот который для мобильных браузеров или тот который для настольных.
  3. Позиция при прокрутке нужна как для мобильного так и для настольного браузера.
к меню ↑

Прокрутка страницы

Вот пример с разным поведением элементов position: fixed.

В этом примере зеленый квадрат имеет свойство z-index: 1;, розовый квадрат имеет свойство z-index: 3;, и оранжевый квадрат имеет z-index: 2;. Синий квадрат является дочерним оранжевого квадрата и имеет свойство position: fixed;.

Если синий квадрат получит свою собственную позицию, оранжевый квадрат со свойством z-index вычисляет позицию относительно синего квадрата. Потому что синий квадрат в корне позиции имеет z-index: 0;, это означает что оранжевый квадрат паркуется за зеленым и розовым квадратом, которые имеют z-index 1 и 3 (соответственно) в корне контекста.

Если синий квадрат не получит собственную позицию, оранжевый квадрат со значением z-index вычисляется по отношению к корню позиции (вместе с зеленым и розовым квадратом). Таким образом парковка оранжевого квадрата чередуется с розовым и зеленым квадратом.

В примере, с левой стороны синий квадрат со своей позицией в контексте, потому что его прозрачность составляет меньше 1-го.

к меню ↑

Поддержка браузерами position:fixed

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

Поддержка браузерами position:fixed
Internet Explorer Chrome Opera Safari Firefox Android Chrome Android iOS
8+ 31+ 12.1+ 8+ 25+ 40+ 42+ 8.3+

Пример поведения элементов position: fixed. Этот эффект может быть создан путем предоставления нескольких элементов position: fixed; различным частям DOM.

htmlhook.ru | Скрипты для веб-приложений