Wie kann ich über- und untergeordnete Elemente mithilfe von Z-Index in CSS korrekt übereinander legen?

Trennung von übergeordneten und untergeordneten Elementen im Z-Index

In CSS steuert die Z-Index-Eigenschaft die Schichtung von Elementen auf einer Webseite . Aufgrund der Art und Weise, wie CSS Stapelkontexte verarbeitet, kann es jedoch vorkommen, dass ein übergeordnetes Element hinter seinem untergeordneten Element erscheint, obwohl es einen höheren Z-Index hat.

Um dieses Problem zu beheben, ist es nicht immer notwendig, einen negativen Z-Index zu verwenden auf dem untergeordneten Element. Ziehen Sie stattdessen die folgende Lösung in Betracht:

Entfernen Sie den Z-Index des übergeordneten Elements und ändern Sie den Z-Index des untergeordneten Elements:

Anstatt einen Z-Index für das übergeordnete Element festzulegen, entfernen Sie ihn und legen Sie einen negativen Z-Index für das Kind fest. Dadurch wird sichergestellt, dass das untergeordnete Element unter dem übergeordneten Element bleibt, ohne es aus dem Seitencontainer zu verdrängen.

Hier ist ein überarbeiteter CSS-Code:

.parent {
  position: relative;
  width: 350px;
  height: 150px;
  background: red;
  border: solid 1px #000;
}
.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -1;
}

Relative Positionierung sicherstellen:

Sowohl die Positionseigenschaft des übergeordneten als auch des untergeordneten Elements sollte auf „relativ“ oder „absolut“ gesetzt sein, um die ordnungsgemäße Funktion zu ermöglichen Layering.

Beispiel-HTML:

<div class="wrapper">
  <div class="parent">parent 1 parent 1
    <div class="child">child child child</div>
  </div>
  <div class="parent2">parent 2 parent 2</div>
</div>

Diese Lösung platziert das übergeordnete Element über seinem untergeordneten Element, ohne das Gesamtlayout der Seite zu stören oder unerwartetes Verhalten zu verursachen.

Das obige ist der detaillierte Inhalt vonWie kann ich über- und untergeordnete Elemente mithilfe von Z-Index in CSS korrekt übereinander legen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!