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

【问题标题】：Amazing issue: position: absolute is affected by the parent's overflow: hidden?惊人的问题：位置：绝对受父级溢出影响：隐藏？
【发布时间】：2015-12-28 03:59:16
【问题描述】：

我发现了一个 position: absolute 元素被隐藏的奇妙案例。也可以看demohere。

.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 设置为overflow: hidden 而.parent 设置为transform: rotate(0deg)，这使得孩子隐藏。通常，具有 position: absolute; 的 .child 不受其未设置 position: relative 的父元素的影响。那么是什么原因呢？非常感谢！

【问题讨论】：

标签： css

【解决方案1】：

很可能是因为.parent 有一个变换，makes it the containing block 与position: relative 相同的方式对absposed 元素进行变换。

【讨论】：

但是如果我们不设置.grand属性overflow:hidden，这个效果就不会发生
@tailor.lee：你确定吗？ .parent 本身并没有溢出 .grand ，因为它控制着自己的孩子的溢出，所以没有溢出：隐藏在 .grand 上不会有什么不同。如果您删除了 overflow: hidden from both .grand 和 .parent，那么您会看到溢出。
我确定您可以在jsfiddle.net/leoaivy/rs3c1zeL 尝试演示，我在其中删除了 oveflow: hidden on .parent 并且这仍然有效。
@tailor.lee：你在那个小提琴中注释掉了 .parent 的溢出属性。就像我说的，如果你从 both 中删除了这些元素的属性，你会看到溢出。
是的，没错。但我需要在这两个元素上设置溢出：隐藏，这就是问题所在。