ページ メニューの下部 (位置: 画像を含む固定 div) を利用するサイトがあります。div でホバー CSS を使用して、アイコンと、たとえば検索ボックスやソーシャル メディア アイコンを含むボックスなどを交換します。これは、フォアグラウンド div を z-index:-1 に移動させ、ホバー時に z-index:100 を使用してバックグラウンド div を前方に移動させることによってこれを行います (つまり、iPad ではタッチ)。画像には不透明度も適用されているため、ボディ div の全画面背景画像の背後に古い前景画像をポップするために z-index:-1 が必要です。そうしないと、ホバリング後に新しい前景画像を通して古い前景画像が表示されます。
IE、FF、Safari など、および iPad IOS 4.3 で正常に動作します。しかし、iPad IOS 5.1 (iPad をアップグレードしたばかり - IOS 5.0 ではわからない) では、z-index:-1 は div を背景の body div イメージの後ろではなく、その前に配置します。すべての div、ボディ、および背景に z-index 値を割り当てようとしましたが、-1 がそれを背面に送信することはありません。また、すべての正の z-index 番号を作成し、 z-index:0 または z-index:1 をスタックの最後として使用しようとしましたが、これも機能しませんでした。
5.1 の z-index は、-1 の z-index を使用していない他の部分でさえ、iPad と他のブラウザーでスタック順序が変更されたため、少し不安定に見えます。とても奇妙です。
任意のアイデアをいただければ幸いです。
ありがとう、
ブラッド
詳しくは：
CSS
#BottomMidLeft { position: fixed; bottom:0px; left:260px; width: 330px; height:120px; }
#BottomMidPebbleLSml {z-index:60; position: fixed; left:220px; bottom:-95px; background-color:transparent; width:500px; filter:alpha(opacity=80); -moz-opacity:0.80; -khtml-opacity: 0.80; opacity: 0.80; }
#BottomSearchIconGoogle {z-index:70; position: fixed; left:331px; bottom:3px; }
#BottomMidPebbleLBig {z-index:-1; position: fixed; left:200px; bottom:-97px; background-color:transparent; width:500px; filter:alpha(opacity=88); -moz-opacity:0.88; -khtml-opacity: 0.88; opacity: 0.88; }
#BottomSearchGoogle {z-index:-1; position: fixed; left:287px; bottom:22px; background-color:transparent; width:260px;}
#BottomMidLeft:hover #BottomMidPebbleLSml{ z-index:-1; }
#BottomMidLeft:hover #BottomSearchIconGoogle{ z-index:-1; }
#BottomMidLeft:hover #BottomMidPebbleLBig{ z-index:170; }
#BottomMidLeft:hover #BottomSearchGoogle{ z-index:170; }
HTML
<div id="BottomMidLeft">
<div id="BottomMidPebbleLSml"> <img src="/images/elements/pebble-mid_nh.png" alt="Pebble for Overlays" width="300px"/> </div>
<div id="BottomSearchIconGoogle"> <img src="/images/elements/Book1.png" alt="Search Icon" width="55px"/> </div>
<div id="BottomMidPebbleLBig"> <img src="/images/elements/pebble-mid_nh.png" alt="Pebble for Overlays" width="400px" /> </div>
<div id="BottomSearchGoogle"> Google Search Code Here </div>
</div>
<!-- this is the end div #BottomMidLeft -->