如何使用 CSS Transform 3D 將子元素放置在其父元素後面？

如何使用Transform 3D 將子元素重疊在其父元素後面

問題：

如何確保動態子元素總是出現在其父元素的前面，無論它們在DOM 中的位置如何樹？

答案：

使用CSS，您可以在現代瀏覽器中透過Transform 3D 屬性實現此目的：

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

此C 配置具有3D 變換樣式的父元素，並將子元素絕對定位在其中。 Transform:translateZ(-10px) 屬性將子元素沿著 z 軸向後移動 10px，使其出現在其父元素後面。

HTML 結構：

以上是如何使用 CSS Transform 3D 將子元素放置在其父元素後面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！