z-Index LEAD: Ein Kinderelement hinter seinem übergeordneten

das Erreichen des gewünschten visuellen Effekts bei der Anzeige eines untergeordneten Elements hinter seinem Elternteil im Dokumentobjektmodell (Dom) Baum kann eine verwirrende Aufgabe sein. Trotz der weit verbreiteten Implementierung der Z-Index-Eigenschaft produziert es manchmal nicht das erwartete Ergebnis.

Ein zuverlässiger Ansatz, um dieses Problem zu lösen, insbesondere in modernen Browsern, besteht darin, die Transformation 3D-Eigenschaft von CSS3 zu nutzen. Diese Technik hat in den letzten Jahren bekannt geworden und bietet eine Problemumgehung für diese langjährige 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 eines 3D-Rendering-Kontexts ermöglicht. Das untergeordnete Element wird dann absolut innerhalb des Elternteils positioniert und leicht durch obere und linke Eigenschaften versetzt. Schließlich wird die Transformation: TranslateZ (-10px) auf das Kind angewendet und sendet es effektiv in der Z-Dimension rückwärts.

  Parent
  

    Child
  

Diese Technik ermöglicht es dem untergeordneten Element, das Elternteil zu überschneiden, während sie noch dahinter angezeigt werden, und liefert den gewünschten visuellen Effekt. Es beseitigt die Notwendigkeit einer absoluten oder festen Positionierung und bietet eine größere Flexibilität beim Design Ihrer dynamischen Elemente.