Programmiererforum

backdropDas 

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

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?
[b]Problem:[/b]
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
[b]Gewünschtes Verhalten:[/b]
[code]backdropDas [/code]-Element sollte das übergeordnete Element abdecken, aber das erhöhte Element sollte über dem Hintergrund liegen, wie im Fall von Element-2.


[code]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]
[code]


content

Item that should be elevated on top of the backdrop



It works without parent

[/code]



Sandbox-Beispiel