Div与位置：固定不显示div内部位置：在Safari中绝对

Posted 2021-04-13

我在一个绝对定位的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的position属性更改为static或sticky意味着显示内部div。但这些位置不适合我的情况。

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

回答

就在提交这个问题之前，我遇到了答案。虽然写了整篇文章，我发布它以防其他一些可怜的灵魂有同样的问题：

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

答案

就在提交这个问题之前，我遇到了答案。虽然写了整篇文章，我发布它以防其他一些可怜的灵魂有同样的问题：

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

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