Elementhöhe mit zIndex ⇐ HTML

[Guest]

Ich habe Probleme beim Einrichten von Ebenen. Ich habe einen Hintergrund angewendet, der die gesamte Seite abdeckt, aber es kommt zu unerwartetem Verhalten, wenn ich ein Element mit angewendetem Z-Index platziere. Es scheint, dass untergeordnete Elemente innerhalb eines übergeordneten Elements den Z-Index des übergeordneten Elements erben, was Probleme verursacht.
Ist es möglich, Ebenen so zu steuern, dass sich der Hintergrund dazwischen befindet? Eltern und Kind?
Problem:
Nach dem Hinzufügen des zIndex: 8-Stils zum übergeordneten Element, erhöhtes Element befindet sich unter dem Hintergrund. Wenn z-index entfernt wird, funktioniert es wie erwartet
Gewünschtes Verhalten:

Code: Select all

backdropDas 

-Element sollte das übergeordnete Element abdecken, aber das erhöhte Element sollte über dem Hintergrund liegen, wie im Fall von Element-2.

Code: Select all

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;
}

Code: Select all

content

Item that should be elevated on top of the backdrop



It works without parent

Sandbox-Beispiel