Wie behebe ich Div-Überlappungsprobleme mit Z-Index?

Auflösen von Div-Überlappungen mithilfe von Z-Index

In bestimmten Szenarien können Probleme mit überlappenden Divs auftreten, selbst wenn die Z-Index-Eigenschaft verwendet wird . Um den gewünschten Layering-Effekt sicherzustellen, ist es wichtig, die korrekte Verwendung von Z-Index zu verstehen und die Verwendung zusätzlicher CSS-Eigenschaften zum Erstellen eines Stacking-Kontexts in Betracht zu ziehen.

Im angegebenen Beispiel ist das beabsichtigte Verhalten, dass div1 oben angezeigt wird div2. Allerdings führt die bloße Zuweisung eines höheren Z-Index-Werts zu div1 möglicherweise nicht immer zum erwarteten Ergebnis. Um dies zu beheben, sollten Sie beiden Divs die Eigenschaft „position: relative“ hinzufügen. Dadurch wird ein Stapelkontext innerhalb der Elemente erstellt, sodass der Z-Index korrekt wirksam werden kann.

Der geänderte Code unten enthält diesen Fix:

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

Durch Hinzufügen von position: relativ zu beiden Divs, Wir erstellen einen speziellen Stapelkontext für diese Elemente. Dadurch wird sichergestellt, dass der höhere Z-Indexwert, der div1 zugewiesen ist, berücksichtigt wird, was dazu führt, dass div1 wie beabsichtigt über div2 angezeigt wird.

Das obige ist der detaillierte Inhalt vonWie behebe ich Div-Überlappungsprobleme mit Z-Index?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!