Warum wird div1 trotz höherem Z-Index nicht über div2 angezeigt?

Platzieren eines Divs über einem anderen Div mit Z-Index

Bei der Webentwicklung kann es vorkommen, dass Sie Divs übereinander schichten müssen, um das gewünschte Ergebnis zu erzielen visuelle Effekte. Möglicherweise stellen Sie jedoch fest, dass die Verwendung des Z-Index nicht immer die erwarteten Ergebnisse liefert.

Ein häufiges Problem besteht darin, dass div1 nicht über div2 angezeigt wird, obwohl ihm ein höherer Z-Index-Wert zugewiesen wurde. Der Grund hierfür könnte das Fehlen eines geeigneten Stapelkontexts sein.

Um einen Stapelkontext einzurichten, sollten Sie die CSS-Eigenschaft position: relativ zu beiden Divs hinzufügen. Dadurch wird ein neuer Stapelkontext erstellt, in dem Z-Index-Werte wie vorgesehen funktionieren können.

Hier ist eine aktualisierte Version Ihres Codes:

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

Mit dieser Änderung sollte div1 nun ordnungsgemäß oben angezeigt werden div2. Denken Sie daran, dass der Z-Index nur die Stapelreihenfolge innerhalb desselben Stapelkontexts beeinflusst.

Das obige ist der detaillierte Inhalt vonWarum wird div1 trotz höherem Z-Index nicht über div2 angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!