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