iOS的Safari瀏覽器不尊重的z-index

Question

我甚至不知道如何用言語解釋，所以這裏的帶有註釋的圖像：

左邊是iPhone模擬器，右邊是蘋果瀏覽器。有一個Material UI AppBar具有較低的Z-index。這是結構：

我完全難倒。在每個瀏覽器中，這工作正常。

Codepen這裏，這是同一個問題：http://codepen.io/ffxsam/pen/NxwZQv

不是在這裏張貼整個代碼，因爲有一噸Lorem存有的。但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

2. 改變了的CSS的<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