ios - iOS Safari および Chrome での Z-index の問題

Question

ワードプレスのアンダースコア テーマに基づくレスポンシブ ドロップダウン メニューに問題があります。

デスクトップでは問題ないように見えますが、iPad や iPhone を含む iOS Safari ではそうではありません。

z-index を他の div にも追加しようとしましたが、うまくいきません。私を助けてください。ありがとう。

Answer 1

実際には、translate3d を使用した 4 番目の方法があります。

-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);

iOSブラウザはCSS3に完全対応しているので安心して使えます。

Answer 2

ドロップダウン メニューに単に z-index を適用することはできません。兄弟要素に z-index を適用して、正しいスタック順序を確保する必要があります。

HTML を見なければ、どこに行くべきかを判断することはできません。しかし、私が言える最善の方法は、z-index をナビゲーション バー全体に適用し、z-index をコンテンツ div 全体に適用することです。Ajay が言ったように、z インデックスが正しく機能するためには、適用される要素を非静的に配置する必要があることに注意してください (あなたの場合、 position: relative が最適なオプションである可能性が最も高いでしょう)。