z-index在ipad中不能很好地工作

Question

我正在用缩略图翻转（http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/）与全屏库建立一个朋友的网站（http://pasionesargentas.com/sm/）。我不太喜欢翻盖的想法，所以我只是简单地选择禁用它，然后添加一个菜单。菜单div css类似于

#top { 
position:fixed; 
background: transparent; 
display: block; 
z-index: 99999; 
} 

它在Chrome，Safari，Explorer和Opera中正常工作。但由于某种原因，她无法在iPad上看到菜单。由于我没有ipad，我下载了Ripple Mission Control，并且它工作的很好，所以我不知道发生了什么。

现在，问题：我必须为平板电脑浏览器（iPad）做不同的CSS吗？或者是画廊搞乱了菜单并覆盖它？

Answer 1

.description { 
position: fixed; 
top: 5px; 
left: 50px; 
text-shadow: 1px 1px 1px black; 
z-index: 5; 
} 
#nav:hover { 
background: #829FB0; 
opacity: 1.0; 
filter: alpha(opacity=100); 
z-index: 10; 
} 
#nav { 
align: center; 
background: #829FB0; 
padding: 3px 7px; 
display: inline; 
opacity: 1.0; //change this later 
filter: alpha(opacity=65); 
-moz-border-radius: 9px; 
border-radius: 9px; 
z-index: 10; 
} 

这个问题可能是透明覆的div，所以先用这个代码，其中的div /必须被置于较高的节点不是透明的，然后看，还使用Z-指标取代你的代码，我已经给出了，你不需要太高的值

在检查css中的错误时，请确保您使节点可见并删除它们的不透明度并且不要为z索引提供太高的值。试试这个，如果不行的话我会仔细看看。

Answer 2

有同样的问题，想在另一个div上使用一个透明png的叠加div。发现z-index只适用于位置属性已明确设置为绝对，固定或相对的元素。立即修复了我的ipad z-index问题。

.topbar { 
    display:block; 
    background: transparent; 
    height: 60px; 
    width: 1024px; 
    display: block; 
    margin: 0; 
    padding: 0; 
    z-index:6; 
    position:relative; 
} 
.middlebar { 
    display:block; 
    background: transparent; 
    height: 60px; 
    width: 1024px; 
    display: block; 
    margin: 0; 
    padding: 0; 
    z-index:5; 
    position:relative; 
} 
.bottom { 
    display:block; 
    background: transparent; 
    height: 758px; 
    width: 1024px; 
    display: block; 
    margin: 0; 
    padding: 0; 
    z-index:4; 
    position:relative; 
}