Чому z-індекс не працює?

Тож якщо я z-indexправильно розумію , то в цій ситуації було б ідеально:

Я хочу розмістити нижнє зображення (тег / карту) під ділом над ним. Таким чином, ви не бачите гострих країв. Як це зробити?

z-index:-1 // on the image tag/card

або

z-index:100 // on the div above

теж не працює. Ні поєднання нічого подібного. Як це?

z-indexВластивість працює тільки на елементах з positionзначенням , ніж static(наприклад position: absolute;, position: relative;чи position: fixed).

Існує також position: sticky;те, що підтримується в Firefox, має префікс у Safari, працював певний час у старих версіях Chrome під користувацьким прапором, і Microsoft розглядає його, щоб додати до свого браузера Edge.

Важливо
Для регулярного позиціонування обов'язково вкажіть position: relativeна елементах, де ви також встановили z-index. Інакше це не набере чинності.

Якщо ви встановите позицію на інше значення, staticоднак, але ваш елемент z-indexвсе ще не працює, можливо, якийсь батьківський елемент z-indexвстановив.

Контексти укладання мають ієрархію, і кожен контекст укладання розглядається в порядку укладання батьківського контексту укладання.

Так що з наступним html

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }

<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

Незалежно від того , наскільки великий z-indexз el3буде встановлено, він буде завжди знаходитися під el1тому що це батько має більш низький контекст стека. Ви можете уявити порядок укладання в якості рівнів, де порядок складання el3фактично становить 3,8, що нижче 5 .

Якщо ви хочете перевірити складання контекстів батьківських елементів, ви можете скористатися цим:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

Існує чудова стаття про укладання контекстів на MDN

Ваші елементи повинні мати positionатрибут. (Наприклад absolute, relative, fixed) або z-indexне працюватиме.

У багатьох випадках елемент повинен бути встановлений для z-indexроботи.

Дійсно, звернення position: relativeдо елементів у запитанні, ймовірно, вирішить проблему (але код не надано достатньо, щоб точно знати).

На насправді, position: fixed, position: absoluteі position: stickyтакож дозволить z-index, але ці значення також змінити розташування. З position: relativeкомпонуванням не заважає.

По суті, поки елемент не є position: static(налаштування за замовчуванням), він вважається позиціонованим і z-indexбуде працювати.

Багато відповідей на "Чому z-індекс не працює?" питання стверджують, що працює z-index лише на позиціонованих елементах. Що стосується CSS3, це вже не відповідає дійсності.

Елементи, які є гнучкими елементами або елементами сітки, можна використовувати z-indexнавіть тоді, коли positionє static.

З специфікацій:

4.3. Flex Item Z-Ordering

Елементи Flex фарбують точно так само, як і вбудовані блоки, за винятком того, що замовлення з модифікованим порядком використовується замість необробленого порядку документа та z-indexзначення, відмінні від autoстворення контексту складання, навіть якщо positionє static.

5.4. Впорядкування осі Z: z-indexВластивість

Порядок фарбування елементів сітки точно такий же, як і вбудовані блоки, за винятком того, що замовлення документа, модифікованого порядком, використовується замість необробленого порядку документа та z-indexзначення, відмінні від autoстворення контексту складання, навіть якщо positionє static.

Ось демонстрація z-indexроботи над непозиціонованими гнучкими елементами: https://jsfiddle.net/m0wddwxs/