我有一个网站利用页面菜单的底部（位置：其中包含图像的固定div），在div上使用悬停CSS在图标之间切换，例如搜索框或带有社交媒体图标的框它通过使前景div成为z-index：-1并使用z-index：100来悬挂（即在iPad上触摸）来实现这一点。图像也应用了不透明度，因此它需要z-index：-1来在主体div中的全屏背景图像后面弹出旧的前景图像，否则在悬停后通过新的前景图像看到旧的前景图像。 / p>
适用于IE，FF，Safari等以及iPad IOS 4.3。但是在iPad IOS 5.1上（刚升级我的iPad - 在IOS 5.0上不确定）z-index：-1并没有将div放在背景体div图像后面，而是放在它前面。我已经尝试为所有div，正文和背景分配一个z-index值，但是我没做什么让-1将它发送到后面。我也试过制作所有正z-index数字并使用z-index：0或z-index：1作为堆栈中的最后一个但是这也不起作用。
5.1 z-index看起来有点不稳定，因为即使是其他没有使用-1 z-index的部分也改变了iPad上的堆叠顺序与其他浏览器相比，所以事情正在消失在排名较低的z-index之后。非常奇怪。
任何想法都赞赏，
谢谢，
布拉德
更多信息：
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 -->