z-index not working very well in ipad

问题

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?

回答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;
}

The problem could be transparent overlying divs, so first replace your code with this code, where the divs/nodes that have to be placed higher are not transparent and then see, also use z-indexes that I have given, you do not need too much high values

When checking for errors in css make sure you make nodes visible and remove their opacity and never give too high values for z-indexes. Try this, if it does not work I will look closely.

回答2:

Had the same problem, wanted to use an overlaying div with a transparent png on top of another div. Found out that z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative. Fixed my ipad z-index problem instantly.

.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; 
}

来源：https://stackoverflow.com/questions/11836451/z-index-not-working-very-well-in-ipad

标签

html

css

mobile-safari

z-index