具有位置的 div：固定不显示在具有位置的 div 内部：在 Safari 中是绝对的答案

【问题标题】：Div with position: fixed not displaying inside div with position: absolute in Safari具有位置的 div：固定不显示在具有位置的 div 内部：在 Safari 中是绝对的
【发布时间】：2017-06-13 13:41:12
【问题描述】：

我在绝对定位的 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>

在小提琴中，将外部 div 的位置属性更改为静态或粘性意味着显示内部 div。但这些职位不适合我的情况。

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

【问题讨论】：

将答案部分作为答案发布并从问题中删除
我可以确认 Safari 不能很好地处理带有 z-index 的父 div 和带有 position:fixed 的子 div。删除父 div 中的 z-index 成功。

标签： html css safari cross-browser

【解决方案1】：

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

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

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

【讨论】：

很棒的发现，这让我呆了两天，希望我以前喜欢这个帖子！