Повышение элементов с помощью zIndex ⇐ CSS

[Anonymous]

У меня возникли проблемы с настройкой слоев. Я применил фон для покрытия всей страницы, но при размещении элемента с примененным z-индексом происходит неожиданное поведение. Кажется, что дочерние элементы внутри родительского элемента наследуют z-индекс родительского элемента, что вызывает проблемы.
Можно ли управлять слоями таким образом, чтобы фон находился между родительский и дочерний элемент?
Проблема:
После добавления стиля zIndex: 8 к родительскому элементу повышенный элемент находится под фон. Если z-index удален, он работает должным образом.
Желаемое поведение:

Код: Выделить всё

backdropЭлемент 

должен закрывать родительский элемент, но элемент с повышенными правами должен находиться поверх фона, как в случае с элементом-2.

Код: Выделить всё

body {
margin: 0;
background-color: linen;
}

.backdrop {
position: fixed;
width: 100%;
height: 100vh;
background: black;
z-index: 10;
opacity: 0.8;
}

.parent {
background: red;
height: 20vh;
z-index: 8;
position: relative;
}

.elevate-item {
background: cyan;
z-index: 12;
position: relative;
}

.item-2 {
background: green;
height: 20vh;
z-index: 12;
position: relative;
}

Код: Выделить всё

content

Item that should be elevated on top of the backdrop



It works without parent

Пример песочницы

Подробнее здесь: https://stackoverflow.com/questions/793 ... ing-zindex