Z-index doesn't work very well on ipad

Question

I am creating a website for a friend ( http://pasionesargentas.com/sm/ ) with a full screen thumbnail gallery ( http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/ ) . I didn't really like the idea of ​​a flip thing, so I just chose to turn it off and add a menu. The css div menu is similar to

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

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

Now the question is: do I need to do css for tablet browsers (iPad)? Or is it a gallery that messes with the menu and covers 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; } 

The problem can be transparent compared to divs , so first replace the code with this code, where the divs / nodes that should be placed above are not transparent, and then look, also use the z-indexes that I gave, you don’t need too big values

When checking errors in css, make sure that you make the nodes visible and remove their opacity and never give too large values ​​for z-indices. Try this, if it doesn’t work, I will watch carefully.

Answer 2

Had the same problem, wanted to use an overlay div with transparent png on top of another div. It turned out that z-index will only work with an element whose position property is explicitly set as absolute, fixed or relative. Fixed issue with 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; }