Верстаю далеко не першу сторінку, але з подібною проблемою зіткнувся вперше. В одному з дизайнів мені треба було переробити меню для каталогу. Спочатку використовувалося меню з одним рівнем, але бізнес замовника виріс, і треба було реалізувати типове випадає багаторівневе меню. «Немає проблем!» - подумав я, і швиденько став накидати додаткові стилі з розміткою. Часу багато на це не було потрібно, але ось перше ж тестування виявилося невдалим. Схема меню з'являлися, як і було задумано, але от чомусь їх перекривали елементи з центральної частини сторінки.
«Ха!» - промайнуло у мене в голові. Напевно, в одному зі стилів не вистачає властивості «z-index», що дозволяє управляти порядком накладення позиціонуються елементів на сторінці. Почав додавати «z-index» і нічого доброго з цього не вийшло. Яке б значення я йому не привласнював, елементи з центральної частини сторінки все одно перекривали мою менюшку.
Неоднозначний z-index
Здавалося б, що може бути складного з z-index? Всім відомо, що позиційований елементи на сторінці можуть накладатися один на одного. Управляти порядком накладення якраз і дозволяє властивість «z-index». Наприклад, якщо у нас два елементи з присвоєним значенням z-index - 5 і 10, то останній буде виведений на передньому плані, тому що десять більше п'яти, а більше, значить ближче. Коли властивість «z-index» не задано, то порядок накладення визначається порядком елементів в документі.
Ніяких складнощів начебто немає, поки не починаєш копати глибше. Перші труднощі починаються при появі так званих контекстів накладання. Під контекстом накладення маються на увазі елементи з спільними батьками, що переміщаються разом на передній або задній план.
У контексту накладення є кореневий елемент. Наприклад, у нас є якийсь
для якого ми визначаємо контекст накладання. Отже, все його дочірні елементи теж потраплять в цей же контекст накладання.
Ось тут починається найцікавіше. Контексти накладення не перетинаються між собою. Розташувавши елемент в самому низу одного контексту, не вийти його підняти вище елемента сусіднього контексту. Зміна значення «z-index» навіть на найнеймовірніші цифри не буде приносити очікуваного ефекту.
Коли формується новий контекст накладання
Специфікація визначає кілька умов формування контексту накладення:
Забігаючи вперед, скажу, для вирішення моєї завдання треба було лише додати прозорість (opacity) для кореневого елемента меню і все відразу запрацювало, як було задумано.
Як відображаються елементи в одному контексті накладення
Щоб краще закріпити все вище сказане, запам'ятаємо раз і назавжди порядок відображення елементів в одному контексті накладення (від далекого до ближнього).