Wie kann ich mit CSS Transform 3D ein untergeordnetes Element hinter seinem übergeordneten Element positionieren?

Wie man mit Transform 3D ein untergeordnetes Element hinter seinem übergeordneten Element überlappt

Frage:

Wie kann ich sicherstellen, dass a Dynamische untergeordnete Elemente erscheinen immer vor ihrem übergeordneten Element, unabhängig von ihrer Position im DOM Baum?

Antwort:

Mit CSS können Sie dies in modernen Browsern mit der Eigenschaft „transform 3D“ erreichen:

.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);
}

Dieses CSS konfiguriert das übergeordnete Element mit einem 3D-Transformationsstil und positioniert das untergeordnete Element absolut darin. Die Eigenschaft „transform: translatorZ(-10px)“ verschiebt das untergeordnete Element entlang der Z-Achse um 10 Pixel nach hinten, sodass es hinter seinem übergeordneten Element angezeigt wird.

HTML-Struktur:

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

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