Skip to main content

Що робить властивість z-index?

CSSJunior~1 хв читання
Запропонувати правку

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

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку