Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить властивість z-index?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`z-index`** керує порядком накладання елементів по осі Z, тобто визначає, який елемент буде розташований поверх інших при перекритті; працює лише для елементів, які створюють stacking context. **Ключове:** `z-index` керує глибиною накладання елементів, але його дія обмежена контекстами накладання.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`z-index` керує **порядком накладання елементів по осі Z**, тобто визначає, який елемент буде розташований поверх інших при перекритті. Працює лише для елементів, які **створюють шар (stacking context)**: зазвичай це елементи з `position`, відмінним від `static` (`relative`, `absolute`, `fixed`, `sticky`), а також з низкою інших умов. --- ### **Правила роботи** - чим **вище значення** `z-index`, тим **ближче елемент до користувача** (вище в шарах) - елементи з однаковим `z-index` упорядковуються **за порядком у DOM** - `z-index` **не працює** для елементів з `position: static` --- ### **Приклад** ```css .box1 { position: absolute; z-index: 1; } .box2 { position: absolute; z-index: 10; } ``` `.box2` буде поверх `.box1`. --- ### **Коли** `z-index` **не спрацьовує** Навіть якщо задати більше значення, елемент може не піднятися, якщо він: - в **іншому stacking context** - не має позиціонування - «замкнений» батьківським елементом, у якого свій контекст (наприклад, `transform`, `opacity`, `filter`, `isolation`, `z-index: 0` тощо) --- ### **Підсумок** `z-index` керує **глибиною накладання елементів**, але його дія обмежена контекстами накладання.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.