Div with position: fixed not displaying inside div with position: absolute 在 Safari 中

Question

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

.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 在 Safari 中显示而不改变 div 的位置？

Answer 1

就在提交这个问题之前，我看到了答案。虽然把整个事情都写出来了，但我还是把它贴出来以防其他可怜的人遇到同样的问题：

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

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

Div with position: fixed not displaying inside div with position: absolute 在 Safari 中

Div with position: fixed not displaying inside div with position: absolute in Safari

html

css

safari

cross-browser