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

请注意我

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

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

iOS Safari不尊重z-index

1 个答案: