在Safari中，使用position：absolute的div中，具有position：fixed的div不显示

Question

在Safari中，使用position：absolute的div中，具有position：fixed的div不显示

11

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

在这个代码演示中，将外层 div 的 position 属性更改为 static 或 sticky，可以显示内层 div。但这些位置对我的情况不适用。

有没有一种方法可以在 Safari 中显示内层 div，而不必更改 div 的位置？

- Runny Yolk

将答案部分发布为答案并从问题中删除 - Paolo Forgia

1

我可以确认Safari与具有z-index的父div和position:fixed的子div不兼容。移除父div中的z-index解决了问题。 - Jason Kim

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sami Ahmed Siddiqui · Accepted Answer

在提交这个问题之前，我找到了答案。尽管已经写出了整个内容，但我还是会发布它，以防其他可怜的灵魂遇到同样的问题：

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

注意：上面的答案是问题作者在问题中发布的，只是将其复制粘贴到这里，以便其他用户可以轻松查看。