Z-index и stacking context в Elementor: почему элемент остаётся под секцией

Что такое z-index и stacking context

Свойство z-index определяет порядок размещения элементов по оси Z — то есть какой элемент будет ближе к пользователю. Однако z-index не сравнивает все элементы страницы в одном глобальном списке. Браузер сначала работает со stacking context, или контекстами наложения, а уже внутри каждого контекста определяет порядок дочерних элементов.

Например, dropdown имеет z-index: 9999, но его родительский контейнер находится в слое с более низким приоритетом, чем соседняя секция. В такой ситуации dropdown не сможет «перепрыгнуть» через родительский stacking context, даже если его собственный z-index очень большой.

Stacking context могут создавать, в частности, позиционированные элементы с собственным z-index, transform, opacity со значением меньше 1, filter, isolation, некоторые значения contain и will-change. Поэтому проблема часто скрыта на уровне контейнера, а не самого меню или хедера.

• z-index работает корректно только в контексте наложения, к которому относится элемент.
• Большое число не отменяет ограничений родительского stacking context.
• Трансформации и фильтры, добавленные без очевидной необходимости, могут изменить порядок слоёв.
• overflow: hidden обычно сам по себе не создаёт stacking context, но может обрезать dropdown или другой дочерний элемент.

Почему z-index в Elementor может не работать

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

Типичная ситуация: для хедера установлены position: sticky и z-index: 100, но один из его родителей имеет transform или неподходящее значение overflow. В другом случае соседняя секция получила собственный z-index: 200 и оказалась выше на уровне родительских контейнеров.

Ещё одна распространённая причина — z-index задан не тому элементу. Например, значение установили для виджета меню, хотя перекрытие создаёт весь контейнер хедера. В такой схеме нужно проверить и поднять контейнер, который участвует в сравнении слоёв.

• У хедера нет position: relative или sticky.
• z-index назначен дочернему виджету, а не нужному родительскому контейнеру.
• Соседняя секция имеет более высокий z-index.
• Родительский контейнер имеет transform, filter, opacity или другое свойство, создающее stacking context.
• Dropdown обрезается из-за overflow: hidden.
• Работу sticky нарушает родительский контейнер с неподходящей высотой или прокруткой.

Как проверить проблему с помощью инструментов браузера

Быстрее всего диагностировать проблему можно через DevTools в Chrome, Edge или Firefox. Откройте страницу, кликните правой кнопкой мыши по хедеру или dropdown и выберите проверку элемента. Во вкладке Styles или Computed посмотрите фактические значения position, z-index, overflow, transform, filter и opacity.

Проверяйте не только выбранный элемент. Поднимайтесь по DOM-дереву от dropdown к хедеру, контейнеру, секции и wrapper страницы. На каждом уровне ищите свойства, которые создают отдельный контекст или обрезают содержимое.

Если в браузере видно, что dropdown имеет большой z-index, но весь его родительский контейнер расположен под другой секцией, увеличение числа не решит проблему. Нужно изменить порядок на уровне родительских контейнеров или убрать лишний stacking context.

• Проверьте, какой элемент фактически перекрывает хедер или меню.
• Сравните z-index хедера с z-index соседней секции.
• Посмотрите, нет ли у родителя transform, filter или opacity.
• Проверяйте computed-значения, а не только CSS-код в редакторе.
• Временно отключите подозрительное свойство в DevTools и посмотрите, изменилась ли ситуация.

Базовая настройка sticky-хедера

Для простого sticky-хедера обычно нужны position: sticky, координата top и z-index. CSS можно добавить к нужному элементу или контейнеру с помощью механизма Custom CSS, если он доступен в вашей конфигурации Elementor. Селектор selector в примере означает текущий элемент, к которому применяется код.

Повышайте z-index не вслепую, а в рамках понятной иерархии. Например, хедеру можно назначить значение 100, а обычным секциям оставить auto или меньшее значение. Если в проекте уже используется система слоёв, лучше придерживаться её, чтобы не создавать конфликтов.

• Применяйте position: sticky к хедеру или его основному контейнеру.
• Задайте top: 0, если хедер должен прилипать к верхнему краю окна.
• Установите z-index именно для элемента, который должен быть выше соседних секций.
• Убедитесь, что sticky-элемент имеет достаточную высоту родительского контейнера для прокрутки.

selector {
  position: sticky;
  top: 0;
  z-index: 100;
}

Как исправить stacking context и обрезание dropdown

Если базовый CSS не помог, проверьте родительские контейнеры. Уберите transform или filter, если они не нужны для анимации или дизайна. Также осторожно используйте opacity: даже значение 0.99 создаёт отдельный контекст наложения.

Для dropdown особенно важен overflow. Если контейнер хедера или его предок имеет overflow: hidden, меню может быть физически обрезано границами контейнера. В таком случае z-index не поможет, поскольку он меняет порядок слоёв, но не позволяет содержимому выйти за пределы области обрезки.

После изменения стилей проверьте меню на компьютерах и мобильных устройствах. Адаптивные настройки Elementor могут создавать отдельные значения z-index, overflow или позиционирования для разных размеров экрана.

• Замените overflow: hidden на visible, если контейнер не должен обрезать dropdown.
• Не оставляйте transform на родительском элементе без необходимости.
• Проверьте filter, opacity, isolation и will-change.
• Сравните стили для desktop, tablet и mobile.
• После изменения CSS очистите кэш сайта и браузера, если продолжает отображаться старая версия стилей.

/* Пример: применяйте только если контейнер не должен обрезать содержимое */
selector {
  overflow: visible;
}

Практический алгоритм поиска ошибки

Чтобы не менять десятки случайных значений, проверяйте проблему последовательно. Сначала определите, что именно перекрывает хедер или dropdown. Затем сравните родительские контейнеры обоих элементов и найдите уровень, на котором порядок слоёв различается.

Если после отключения transform, filter или overflow проблема исчезает, включайте свойства обратно по одному. Так можно установить точную причину и не сломать другие части дизайна. После исправления проверьте открытие меню, прокрутку страницы, мобильную навигацию и перекрытие модальных окон.

• 1. Определите элемент, который должен быть поверх остальных.
• 2. Добавьте или проверьте его position и z-index.
• 3. Проверьте z-index соседних секций и контейнеров.
• 4. Пройдите всю цепочку родительских элементов.
• 5. Временно отключите transform, filter, opacity и overflow.
• 6. Проверьте результат на разных ширинах экрана.
• 7. Оставьте только необходимые правила, а не набор чрезмерно больших значений z-index.

Распространённые ошибки при настройке z-index

Самая частая ошибка — считать z-index универсальным числом, которое автоматически поднимает элемент над всей страницей. На самом деле важны и значения на уровне родителей, и порядок stacking context.

Также не стоит добавлять z-index каждому контейнеру без необходимости. Избыточное количество контекстов усложняет поддержку и может создать новые конфликты между хедером, popup, cookie-баннером и модальными окнами. Лучше определить логичную иерархию слоёв и применять её выборочно.

Если изменения не видны сразу, причина может быть не в CSS, а в кэшировании стилей, оптимизации CSS или отдельном шаблоне мобильной версии. При этом не следует сразу менять код темы: сначала проверьте фактические стили в DevTools и настройки конкретного контейнера.

• Не полагайтесь на z-index: 999999 без проверки родителей.
• Не путайте проблему наложения с проблемой overflow.
• Не задавайте position: fixed вместо sticky только как временный обходной путь.
• Не забывайте об отдельных стилях для адаптивных режимов.
• Не редактируйте минифицированный CSS или файлы плагинов без резервной копии и понимания последствий.