如果身体有透视，孩子的“位置：绝对”不起作用答案

【问题标题】："position: absolute" in a child doesn't work if body has perspective如果身体有透视，孩子的“位置：绝对”不起作用
【发布时间】：2018-04-01 13:45:55
【问题描述】：

我在构建简单的 CSS 过渡时遇到了问题。

我有我的 body 元素，它的唯一子元素是 div，位置绝对。

在div 内，我在hover 伪类上插入了一个带有简单3d 过渡的矩形：transform: rotateX(90deg)，我想在父元素中设置perspective 样式，以便让它看起来更好。

当我在 body 中设置 perspective 时，过渡工作正常：它创建了透视效果并且看起来不错。但是 - 问题就在这里 - 孩子失去了绝对位置（至少在 Chrome 中）。

我创建了一个codepen example，您可以将body 样式注释掉，这将应用一个绝对位置。

当设置perspective 时，div 也会失去蓝色背景，但我认为这是因为它的高度变为 0。

这是一个错误吗？我该如何解决？

谢谢

【问题讨论】：

为什么不尝试将透视应用到绝对定位的 div（body 的子元素）而不是应用到 body 本身？

标签： css css-transitions transform webkit-perspective

【解决方案1】：

遇到了同样的问题，非常奇怪的行为。似乎向身体添加透视会引入奇怪的怪癖，我的方法是在内部创建一个虚拟的“身体”容器，就像它是身体一样。

而不是类似的东西

<html>
  <body style="perspective: 1000px">
    <div style="transform:rotate(10deg); position:absolute"></div>
  </body>
</html>

试试

<html>
  <body>
    <container style="perspective: 1000px">
      <div style="transform:rotate(10deg); position:absolute"></div>
    </container>
  </body>
</html>

【讨论】：