☣
I don't want to hear anything about 3D on the WEB.
z-index is evil on the web))
☣
BACK TO MAIN PAGE

z-index

Контекст накладення

Синтаксис

z-index: auto | <integer>

Чим більше значення z-index тим вище(ближче до глядача) знаходиться елемент.
"auto" те саме що "0"
(! але "0" створює новий контекст накладення, "auto" - ні.
<integer> додатнє або від’ємне число.

Якщо у сусідніх елементів однакові значення z-index, тоді працює стандартний порядок накладання в html.
z-index не працює з position: static;
z-index працює тільки з position: relative, absolute, fixed, sticky.

ще раз !!
z-index не працює з position: static;
ще раз !!
z-index працює тільки з position: relative, absolute, fixed, sticky.
Приклад. Все ще просто
z-index створює контекст накладення(примітка: не auto, є position: не static).
цей контекст накладення має значення/вплив !!тільки для його child-елементів!!

Перший шок
!!!child-елементи елемента-батька(з контекстом накладення) живуть у свому ізольованому просторі
!!!child-елементи не можуть бути нижче елемента-батька(з контекстом накладення)
opacity<0 Просто вважайте його рівнозначним z-index:0;
opacity<0 --- створює контекст накладення!!!

<body> (<html>)
елементи з z-index не “auto” і position іншим ніж “static”; fixed(створює контекст навіть без z-index)
елементи з opacity<1
Flex- та Grid-елементів зі значенням z-index не “auto”. Навіть якщо він “static”.
елементи з властивістю transform не “none”
елементи з властивістю “will-change”, filter, transform-style зі значенням preserve-3d; perspective зі значенням не “none”, CSS Regions: встановлене значения flow-from не“none”, для елемента з content не "normal".

LaSoft