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 не допоможе, бо він змінює порядок шарів, але не дозволяє вмісту вийти за межі області обрізання.

Після зміни стилів перевірте меню на десктопі та мобільних пристроях. Responsive-налаштування 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 лише як тимчасовий обхідний шлях.
• Не забувайте про окремі стилі для адаптивних режимів.
• Не редагуйте minified CSS або файли плагінів без резервної копії та розуміння наслідків.