z-index的在ipad不工作得很好(z-index not working very well

I am building a site for a friend (http://pasionesargentas.com/sm/) with the fullscreen gallery with thumbnail flip (http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/). I didn't quite like the idea of the flip thing so I simply preferred to disable it and add a menu instead. The menu div css is something like

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

It works fine in Chrome, Safari, Explorer and Opera. But for some reason she can't see the menu on her iPad. Since I don't have an ipad I downloaded the Ripple Mission Control and it works fine too so I have no clue what's going on.

Now, the question: Do I have to do css different for tablet browsers (iPad)? Or it is the gallery that's messing up with the menu and covering it?

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与另一个DIV的顶部透明的PNG。 发现， 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; 
}

文章来源: z-index not working very well in ipad