惊人的问题：位置：绝对受父母溢出的影响：隐藏？

Question

我发现了一个令人不快的情况，其中隐藏了 position：absolute 元素。 您还可以查看演示here。

.grand {
  float: left;
  overflow: hidden;
  /* transform: scale(1,1); */
}
.parent {
  width: 50px;
  height: 50px;
  background-color: gold;
  overflow: hidden;
  transform: rotate(0deg);
}
.child {
  position: absolute;
  top: 20px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: pink;
}

<div class="grand">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>  

问题是： .grand 设置为溢出：隐藏， .parent 设置为transform：rotate（0deg），这会隐藏子项。通常，具有 position：absolute; 的.child不会被其未设置为 position：relative 的父元素所占据。那是什么原因？非常感谢你！

Answer 1

可能，.parent有一个变换这一事实，makes it the containing block对于被覆元素position: relative的作用方式{。}}。