z-indexを適切に設定しても、ipad safariでは機能しません。

Question

私は本当に悪い状況です。私はページの下に私が表示しているカスタムdivを持っています。 iPad上で動作していない唯一の問題です。両方の要素に適切なZ-インデックスがある場合でも、オーバーレイはポップアップをカバーします。

この問題はiPad Safariでのみ発生します。他のブラウザでは正常に動作しています。私は次にまたはそれに近いため、問題はあなたが見ることができるよう

ここでスナップ

knockout.js

のバインディングコンテキストに私のために可能ではない、オーバーレイdiv要素によって私のポップアップをシフトする必要がある1つの解決策を見つけました添付されたイメージは開いたカレンダーがオーバーレイグレーのdivの後ろにあります。

以下は、higlitedがカレンダーコンテナ&の最後のオーバーレイdivであるhtml構造です。

これに対処するための良いアイデアがいくつか出てきたら教えてください。

Answer 1

固定要素がオーバーレイよりも低いz-インデックスを持つ他の固定要素の内側にあるように、要素自体が高いz-インデックスを持っていてもその背後に留まるようです。だから、より高い固定要素を見つけて、それをより高いZ値に変更する必要があります。

.overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    z-index: 4; 
 
} 
 
.lower { 
 
    position: fixed; 
 
    z-index: 2 
 
} 
 
.popup { 
 
    position: fixed; 
 
    border: 1px solid black; 
 
    background: white; 
 
    height: 200px; 
 
    width: 200px; 
 
    z-index: 100; 
 
}

<div class="lower"> 
 
    <div class="popup"></div> 
 
</div> 
 
<div class="overlay"></div>