Wie kann man beheben, dass Divs trotz korrekter Verwendung des Z-Index nicht in der richtigen Reihenfolge erscheinen?

Stapelreihenfolge mit Z-Index steuern

Beim Übereinanderschichten von Elementen in HTML steuert Z-Index, welche Elemente oben angezeigt werden. Trotz korrekter Verwendung des Z-Index kann es vorkommen, dass ein Div unter einem anderen Div verbleibt.

Um dieses Problem zu beheben, beachten Sie Folgendes:

CSS-Code:

<code class="css">div {
  width: 100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  position: relative;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
  position: relative;
}</code>

Erklärung:

1. Position hinzufügen: relativ zu beiden Divs, um einen Stapelkontext zu erstellen. Dadurch kann der Z-Index ordnungsgemäß funktionieren.
2. Legen Sie einen höheren Z-Index für das Div fest, das oben angezeigt werden soll (div1).
3. Stellen Sie sicher, dass der Z-Index des zugrunde liegenden Div ( div2) ist niedriger.

Durch die Implementierung dieser Schritte wird div1 korrekt über div2 in der gewünschten Stapelreihenfolge angezeigt.

Das obige ist der detaillierte Inhalt vonWie kann man beheben, dass Divs trotz korrekter Verwendung des Z-Index nicht in der richtigen Reihenfolge erscheinen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!