Warum ist der erste DIV Div1 immer noch sichtbar, wenn ihm ein niedrigerer Z-Index-Wert als Div2 zugewiesen wird?

Z-Index zur Überlagerung von DIVs verwenden

Diese Frage untersucht die Verwendung von Z-Index zur Steuerung der Stapelreihenfolge von DIV-Elementen. Der Fragesteller versucht, mithilfe des Z-Index einen DIV (Div1) über einen anderen (Div2) zu legen, aber der gewünschte Effekt wird nicht erreicht.

Der bereitgestellte Code enthält zwei DIV-Elemente mit unterschiedlichen Z-Index-Werten:

<code class="css">.div1 {
  z-index: 1;
}
.div2 {
  z-index: 2;
}</code>

Trotz des höheren Z-Index von div2 bleibt div1 davor sichtbar. Dies liegt daran, dass die Position des Elements nicht explizit festgelegt ist.

Um dieses Problem zu beheben, muss position: relativ zu beiden Divs hinzugefügt werden. Dadurch entsteht ein Stapelkontext, der es ermöglicht, die Elemente relativ zueinander zu positionieren. Der aktualisierte Code wäre:

<code class="css">.div1 {
  z-index: 2;
  position: relative;
}
.div2 {
  z-index: 1;
  position: relative;
}</code>

Mit dieser Änderung wird div1 korrekt über div2 positioniert, da der Z-Index-Wert im erstellten Stapelkontext Vorrang hat.

Das obige ist der detaillierte Inhalt vonWarum ist der erste DIV Div1 immer noch sichtbar, wenn ihm ein niedrigerer Z-Index-Wert als Div2 zugewiesen wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!