Apple如何应用溢出：隐藏到位置内的元素：fixed？

Question

根据我自己的测试并在互联网上研究该主题，position: fixed的元素不尊重父元素的overflow: hidden属性。这包括fixed位置元素的子元素 - 因为它们位于fixed定位元素内，它们也不尊重祖先的overflow: hidden属性。

但是，Apple在Apple Music

上以某种方式解决了这个问题

包含overflow: hidden

的元素

position: fixed

的内部元素

手机本身

您可以通过第二张图片中的蓝色突出显示fixed定位元素确实溢出其容器，其中的手机也是如此（第3张图片）。然而，fixed定位元素（电话）的内容仍被overflow: hidden的祖先剪切。使用Chrome的开发工具，如果我从该祖先移除overflow: hidden属性，则确实会显示整个手机。

Apple如何做到这一点？我尝试使用固定，相对，溢出等设置的相同组合重新创建它，但我显然遗漏了一些东西，因为我没有成功。

更新

正如@ user3790069在他的回答中指出的那样，如果相对定位的元素具有较高的fixed，则z-index定位的元素可以被相对定位的元素剪切，或者仅仅在{{1}之后。位置1（默认情况下，它被赋予更高的z-index）。但是，在Apple Music示例中，fixed属性似乎仍然是他们所依赖的关键。为了测试这个，我删除了一堆DOM来减少混乱。我们在以下屏幕截图中留下的内容是：

a）包含overflow: hidden元素section b）其中一个overflow: hidden元素。

在第一个屏幕截图中，您会看到手机已被剪裁。在第二个屏幕截图中，我删除了position: fixed属性，突然手机的溢出部分变得可见。

Answer 1

首先，我将解释为什么固定的儿童不会被父母overflow: hidden剪掉。只有当 A 是 B <的包含块时， B 框才会被overflow裁剪应用于其祖先 A / strong>即可。但固定元素的the containing block不是一个简单的祖先;包含position: fixed内容的块是整个wiewport。
我认为链接页面上的固定元素并没有被overflow真正切断;它们隐藏在其他定位元素之下。

<强> An exemple ：

<div id=cont>
  <div style="background: red">
    <div class=fixed></div>
  </div>
  <div style="background: yellow">
    <div class=fixed id=second></div>
  </div>
    <div style="background: green"></div>
</div>

#cont {
  height: 5000px
}

#cont > div {
  height: 200px;
  position: relative
}

.fixed {
  width: 100px;
  height: 100px;
  background: black;
  position: fixed;
  right: 20px;
  top: 20px
}

#second {
  top: 240px
}