Wie kann ich mithilfe von CSS ein untergeordnetes Element hinter seinem übergeordneten Element anzeigen?

Z-Index-Probleme: Anzeige eines untergeordneten Elements hinter seinem übergeordneten Element

Erzielung des gewünschten visuellen Effekts der Anzeige eines untergeordneten Elements hinter seinem übergeordneten Element im Dokumentobjektmodell (DOM )-Baum kann eine verwirrende Aufgabe sein. Trotz der weit verbreiteten Implementierung der Z-Index-Eigenschaft führt sie manchmal nicht zum erwarteten Ergebnis.

Ein zuverlässiger Ansatz zur Behebung dieses Problems, insbesondere in modernen Browsern, ist die Nutzung der CSS3-Transformations-3D-Eigenschaft. Diese Technik hat in den letzten Jahren an Bedeutung gewonnen und bietet einen Workaround für diese seit langem bestehende Herausforderung.

.parent {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.child {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px);
}

In diesem Beispiel erhält das übergeordnete Element einen Transformationsstil von „preserve-3d“, der die Erstellung ermöglicht eines 3D-Rendering-Kontexts. Das untergeordnete Element wird dann absolut innerhalb des übergeordneten Elements positioniert und durch die oberen und linken Eigenschaften leicht versetzt. Abschließend wird die Transformation: translatorZ(-10px) auf das untergeordnete Element angewendet, wodurch es effektiv in der Z-Dimension nach hinten verschoben wird.

<div class="parent">
  Parent
  <div class="child">
    Child
  </div>
</div>

Diese Technik ermöglicht es dem untergeordneten Element, das übergeordnete Element zu überlappen, während es weiterhin dahinter angezeigt wird. Bereitstellung des gewünschten visuellen Effekts. Es macht eine absolute oder feste Positionierung überflüssig und bietet eine größere Flexibilität bei der Gestaltung Ihrer dynamischen Elemente.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS ein untergeordnetes Element hinter seinem übergeordneten Element anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!