2

我有一个网站，它利用页面菜单的底部（位置：其中包含图像的固定 div）在 div 上使用悬停 CSS 在图标和例如搜索框或带有社交媒体图标的框等之间进行切换。它通过在悬停时使用 z-index:100 使前景 div 变为 z-index:-1 和背景 div 来实现这一点（即在 iPad 上触摸）。图像也应用了不透明度，因此它需要 z-index:-1 将旧的前景图像弹出到 body div 中全屏背景图像的后面，否则您在悬停后通过新的前景图像看到旧的前景图像。

在 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 -->
4

0 回答 0