html - 位置为 : fixed not displaying inside div with position: absolute in Safari 的 Div

Question

我在绝对定位的 div 中有一个固定位置的 div。在 Chrome 和 Firefox 中会显示内部 div，但在 OSX Safari 10 中则不会。

JSFiddle

.outer {
  margin-top: 21px;
  position: absolute;
  background: red;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  max-height: 100vh;
}

.inner {
  display: inline;
  overflow: hidden;
  position: fixed;
  background-color: blue;
  max-width: 100vw;
}

<div class="outer">
  <p>Inner Div</p>
  <div class="inner">
    <p>Outer Div</p>
  </div>
</div>

在 fiddle 中，将外部 div 的位置属性更改为 static 或 sticky 意味着显示内部 div。但是这些职位不适合我的情况。

有没有办法在不改变 div 位置的情况下让内部 div 在 Safari 中显示？

Answer 1

就在提交这个问题之前，我看到了答案。写完所有内容后，我将其发布以防其他可怜的人遇到同样的问题:

简单的解决方案是删除父 div 上的 z-index: 1; 规则。它在 Chrome、FireFox 或我测试的任何移动浏览器中没有任何区别，但在 Safari 中却完全不同。

注意:以上是问题作者在问题本身中发布的答案，只需复制并粘贴到此处，以便其他用户可以轻松看到。