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>

在小提琴中，将外部div的position属性更改为static或sticky意味着显示内部div。但这些立场并不适合我的情况。

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

ANSWER

在提交此问题之前，我遇到了答案。虽然写完了所有的东西，我发布它以防其他一些可怜的灵魂有同样的问题：

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

Answer 1

就在提交这个问题之前，我遇到了答案。虽然已将整个内容写完了，但如果其他可怜的灵魂也有相同的问题，我会予以发布：

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

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

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

1 个答案: