Wie lässt man in CSS ein übergeordnetes Element über seinem untergeordneten Element erscheinen?

So heben Sie das übergeordnete Element über das untergeordnete Element in der Z-Achse an

In CSS kann das Erreichen der gewünschten Stapelreihenfolge verschachtelter Elemente eine Herausforderung sein. Diese Frage befasst sich mit dem Szenario, in dem ein untergeordnetes Element über seinem übergeordneten Element auf der Z-Achse angezeigt wird und es nicht ausreicht, nur den Z-Index festzulegen.

Um dieses Problem zu beheben, besteht die Lösung darin, einen negativen Z-Index-Wert festzulegen für das untergeordnete Element. Im Gegensatz dazu sollten alle Z-Index-Einstellungen für das übergeordnete Element entfernt werden. Dadurch wird das übergeordnete Element effektiv über das untergeordnete Element in der Z-Achse angehoben, während die gewünschte Positionierung der Elemente innerhalb der Dokumentstruktur beibehalten wird.

Betrachten Sie das folgende Codebeispiel:

.parent {
  position: relative;
  width: 350px;
  height: 150px;
  background: red;
  border: solid 1px #000;
}

.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -1;  // Negative z-index applied to the child element
}

.wrapper {
  position: relative;
  background: green;
  height: 350px;
}

Mit Durch diese Änderung wird das übergeordnete Element nun über dem untergeordneten Element in der Z-Achse angezeigt, wodurch das in der ursprünglichen Frage beschriebene Problem effektiv gelöst wird.

Das obige ist der detaillierte Inhalt vonWie lässt man in CSS ein übergeordnetes Element über seinem untergeordneten Element erscheinen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!