Контексти накладення або коли z-index не працює

Контексти накладення або коли z-index не працює

Верстаю далеко не першу сторінку, але з подібною проблемою зіткнувся вперше. В одному з дизайнів мені треба було переробити меню для каталогу. Спочатку використовувалося меню з одним рівнем, але бізнес замовника виріс, і треба було реалізувати типове випадає багаторівневе меню. «Немає проблем!» - подумав я, і швиденько став накидати додаткові стилі з розміткою. Часу багато на це не було потрібно, але ось перше ж тестування виявилося невдалим. Схема меню з'являлися, як і було задумано, але от чомусь їх перекривали елементи з центральної частини сторінки.

«Ха!» - промайнуло у мене в голові. Напевно, в одному зі стилів не вистачає властивості «z-index», що дозволяє управляти порядком накладення позиціонуються елементів на сторінці. Почав додавати «z-index» і нічого доброго з цього не вийшло. Яке б значення я йому не привласнював, елементи з центральної частини сторінки все одно перекривали мою менюшку.

Неоднозначний z-index

Здавалося б, що може бути складного з z-index? Всім відомо, що позиційований елементи на сторінці можуть накладатися один на одного. Управляти порядком накладення якраз і дозволяє властивість «z-index». Наприклад, якщо у нас два елементи з присвоєним значенням z-index - 5 і 10, то останній буде виведений на передньому плані, тому що десять більше п'яти, а більше, значить ближче. Коли властивість «z-index» не задано, то порядок накладення визначається порядком елементів в документі.

Ніяких складнощів начебто немає, поки не починаєш копати глибше. Перші труднощі починаються при появі так званих контекстів накладання. Під контекстом накладення маються на увазі елементи з спільними батьками, що переміщаються разом на передній або задній план.

У контексту накладення є кореневий елемент. Наприклад, у нас є якийсь

для якого ми визначаємо контекст накладання. Отже, все його дочірні елементи теж потраплять в цей же контекст накладання.

Ось тут починається найцікавіше. Контексти накладення не перетинаються між собою. Розташувавши елемент в самому низу одного контексту, не вийти його підняти вище елемента сусіднього контексту. Зміна значення «z-index» навіть на найнеймовірніші цифри не буде приносити очікуваного ефекту.

Коли формується новий контекст накладання

Специфікація визначає кілька умов формування контексту накладення:

  • У ролі елемента виступає кореневий елемент HTML-документа (тег);
  • Елементу задана прозорість (згадуємо про властивість opacity) менше одиниці;
  • Елемент позиціонується статично і властивість z-index! = Auto.

    Забігаючи вперед, скажу, для вирішення моєї завдання треба було лише додати прозорість (opacity) для кореневого елемента меню і все відразу запрацювало, як було задумано.

    Як відображаються елементи в одному контексті накладення

    Щоб краще закріпити все вище сказане, запам'ятаємо раз і назавжди порядок відображення елементів в одному контексті накладення (від далекого до ближнього).

  • Кореневий елемент контексту, тобто елемент, що утворив контекст накладання;
  • Позиційований елементи (+ нащадки) з негативним z-index. Елементи, у яких z-index більше, відображаються ближче. Елементи з однаковим значенням «z-index» розташовуються по порядку (відповідно до розмітки);
  • Чи не позиційований елементи розташовуються по порядку;
  • Позиційований елементи (+ нащадки) зі значенням z-index в auto розташовуються по порядку (відповідно до розмітки);
  • Позиційований елементи (+ нащадки) з позитивним значенням z-index (чим більше z-index, тим ближче буде елемент). Якщо у двох елементів однаковий «z-index», то порядок відображення визначається розміткою.