z-index no funciona muy bien en el ipad

Question

Estoy construyendo un sitio para un amigo (http://pasionesargentas.com/sm/) con la galería a pantalla completa con vista en miniatura (http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/). No me gustó la idea de cambiar de tema, así que prefiero desactivarlo y añadir un menú. El menú div css es algo así como

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

Funciona bien en Chrome, Safari, Explorer y Opera. Pero por alguna razón, no puede ver el menú en su iPad. Como no tengo un iPad, descargué el Control de Misión de Ripple y funciona bien también, así que no tengo idea de lo que está pasando.

Ahora, la pregunta: ¿Tengo que hacer CSS diferente para los navegadores de tableta (iPad)? ¿O es la galería la que está estropeando el menú y cubriéndolo?

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

El problema podría ser divs superpuestos transparentes, por lo que primero reemplace el código con el código, donde los divs/nodos que tienen que ser colocado más alto no son transparentes y luego ver, también utilizan índices de z que He entregado, no necesita demasiados valores altos

Cuando compruebe si hay errores en CSS, asegúrese de hacer visibles los nodos y eliminar su opacidad y nunca dar valores demasiado altos para los índices z. Intenta esto, si no funciona lo veré de cerca.

Answer 2

Tenía el mismo problema, quería usar un div superpuesto con un png transparente encima de otro div. Descubrió que z-index solo funcionará en un elemento cuya propiedad de posición se haya establecido explícitamente en absoluto, fijo o relativo. Solucionado el problema de mi ipad z-index al instante.

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