如何使用 CSS Transform 3D 将子元素放置在其父元素后面？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-11-30 03:51:12

原创

474 人浏览过

How Can I Position a Child Element Behind Its Parent Using 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);
}

登录后复制

此 CSS 配置具有 3D 变换样式的父元素，并将子元素绝对定位在其中。 Transform:translateZ(-10px) 属性将子元素沿 z 轴向后移动 10px，使其出现在其父元素后面。

HTML 结构：

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

登录后复制

以上是如何使用 CSS Transform 3D 将子元素放置在其父元素后面？的详细内容。更多信息请关注PHP中文网其他相关文章！