Elementhöhe mit zIndex
Posted: 20 Jan 2025, 15:15
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:-Element sollte das übergeordnete Element abdecken, aber das erhöhte Element sollte über dem Hintergrund liegen, wie im Fall von Element-2.
Sandbox-Beispiel
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