iOS Safari 不尊重 z-index

Question

我什至不知道如何用语言来解释，所以这是一张带有注释的图片：

左边是iOS模拟器，右边是Safari。有一个具有较低 z-index 的 Material UI AppBar。这是结构：

我完全被难住了。在每个浏览器中，这都可以正常工作。

这里是 Codepen，同样的问题：http://codepen.io/ffxsam/pen/NxwZQv

这里没有发布整个代码，因为有大量的 lorem ipsum。但是 StackOverflow 需要一些东西，所以这里是 CSS：

body {
  margin: 0;
}

.app-bar {
  color: #fff;
  min-height: 64px;
  background: #999;
  position: relative;
}

.big {
  font-size: 2em;
}

.viewport {
  padding: 1em;
  font-size: 18px;
  position: absolute;
  border: 2px solid blue;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  padding: 1em;
  z-index: 9000;
}

似乎如果覆盖 div 是您要覆盖的内容的子项，那么世界上所有的 z-index 都无法使其工作。它必须在 DOM 层次结构中的所有其他内容之外。尽管在 React 中，这可能很棘手，因为您希望覆盖层能够访问某些道具，并且将其移出容器会影响数据传输。

Answer 1

请注意我

1. 交换了html中<div class="overlay">和<div class="viewport">的顺序

2. 修改了.overlay的css

html

<div>
  <div class="app-bar">
    <span class="big">Hello.</span>
    <button class="open-overlay">
      Open Overlay
    </button>
  </div>

  <div class="overlay">
      <button class="close-overlay">
        Close this.
      </button>
      <p>00000</p>
      <p>11111</p>
      <p>22222</p>
      <p>33333</p>
      <p>44444</p>
      <p>55555</p>
      <button class="close-overlay">
        Close this.
      </button>
  </div>

  <div class="viewport">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est corporis cum iure id voluptatibus inventore recusandae veniam dolorum harum, minus officia blanditiis asperiores illum laudantium tenetur doloremque hic ea atque!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis illo eligendi magnam laudantium tenetur in consequatur aperiam totam beatae, accusamus sed, distinctio cum quam. Unde dolores ut consectetur temporibus similique.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est corporis cum iure id voluptatibus inventore recusandae veniam dolorum harum, minus officia blanditiis asperiores illum laudantium tenetur doloremque hic ea atque!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis illo eligendi magnam laudantium tenetur in consequatur aperiam totam beatae, accusamus sed, distinctio cum quam. Unde dolores ut consectetur temporibus similique.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est corporis cum iure id voluptatibus inventore recusandae veniam dolorum harum, minus officia blanditiis asperiores illum laudantium tenetur doloremque hic ea atque!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis illo eligendi magnam laudantium tenetur in consequatur aperiam totam beatae, accusamus sed, distinctio cum quam. Unde dolores ut consectetur temporibus similique.
    </p>
  </div>
</div>

css

body {
  margin: 0;
}

.app-bar {
  color: #fff;
  min-height: 64px;
  background: #999;
  position: relative;
}

.big {
  font-size: 2em;
}

.viewport {
  padding: 1em;
  font-size: 18px;
  position: absolute;
  border: 2px solid blue;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.overlay {
  position:relative;
  display: none;
  top:0;
  bottom:0;
  left:0;
  right:0;
  height:calc(100vh - 64px); /* viewport height minus .app-bar height */
  background: #fff;
  padding: 1em;
  z-index: 9000;
}

js

$('.open-overlay').on('click', function () {
  $('.overlay').fadeIn();
});

$('.close-overlay').on('click', function() {
  $('.overlay').fadeOut();
});

http://codepen.io/anon/pen/BjJZKB