如何使用 CSS 在其父元素後面顯示子元素？

Z 索引問題：在其父元素後面顯示子元素

在文檔物件模型(DOM) 中實現在其父元素後面顯示子元素所需的視覺效果) 樹可能是一項令人困惑的任務。儘管 z-index 屬性得到了廣泛的實現，但它有時無法產生預期的結果。

解決此問題的一種可靠方法（尤其是在現代瀏覽器中）是利用 CSS3 的 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);
}

在此範例中，父元素被賦予了preserve-3d 的變換樣式，這使得建立3D 渲染上下文。然後，子元素絕對定位在父元素內，並透過 top 和 left 屬性稍微偏移。最後，將變換：translateZ(-10px) 應用於子元素，有效地將其在 Z 維度上向後發送。

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

此技術允許子元素與父元素重疊，同時仍顯示在其後面，提供所需的視覺效果。它消除了絕對或固定定位的需要，為動態元素的設計提供了更大的靈活性。

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