Wie kann ich dafür sorgen, dass ein übergeordnetes Element trotz eines höheren Z-Index über seinem untergeordneten Element angezeigt wird?

Positionieren verschachtelter Elemente in der Z-Achse

Im Webdesign ist es üblich, Elemente ineinander verschachtelt zu haben. Bei der Positionierung in der Z-Achse kann es jedoch schwierig sein, den gewünschten Effekt zu erzielen. Diese Frage untersucht ein Szenario, in dem ein übergeordnetes Element über seinem untergeordneten Element erscheinen muss, obwohl es einen höheren Z-Index-Wert hat.

Das Problem entsteht, weil das Festlegen eines negativen Z-Index für das untergeordnete Element dazu führt, dass es unter den Wert fällt enthaltendes Element, was zu einer unerwünschten Platzierung führt. Um dieses Problem zu lösen, schlägt die Antwort vor, den Z-Index vom übergeordneten Element zu entfernen und dem untergeordneten Element einen negativen Z-Index zuzuweisen. Dadurch wird sichergestellt, dass das übergeordnete Element auf der Z-Achse oben bleibt, ohne die Position des Seitencontainers zu beeinträchtigen.

Hier ist ein modifiziertes Beispiel, um die Lösung zu demonstrieren:

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

.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -10;
}

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

<div class="wrapper">
  <div class="parent">parent 1 parent 1
    <div class="child">child child child</div>
  </div>
  ...
</div>

Mit diesem aktualisierten CSS bleibt das übergeordnete Element über dem untergeordneten Element, auch wenn ihm eine Z-Index-Eigenschaft fehlt. Das untergeordnete Element wird aufgrund seines negativen Z-Index unterhalb des übergeordneten Elements platziert, wodurch der gewünschte Überlappungseffekt gewährleistet ist.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein übergeordnetes Element trotz eines höheren Z-Index über seinem untergeordneten Element angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!