z-index non funziona molto bene in ipad

Question

Sto costruendo un sito per un amico (http://pasionesargentas.com/sm/) con la galleria a schermo intero con anteprima flip (http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/). Non mi piaceva affatto l'idea della cosa flip, quindi ho preferito semplicemente disabilitarla e aggiungere un menu. Il menu div css è qualcosa come

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

Funziona bene in Chrome, Safari, Explorer e Opera. Ma per qualche motivo non riesce a vedere il menu sul suo iPad. Dal momento che non ho un ipad ho scaricato il Ripple Mission Control e funziona anche così non ho idea di cosa sta succedendo.

Ora, la domanda: devo fare css diversi per i browser tablet (iPad)? O è la galleria che sta rovinando il menu e lo copre?

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

Il problema potrebbe essere div sovrapposti trasparenti, quindi prima sostituire il codice con il codice, dove div/nodi che devono essere posto più in alto non sono trasparenti e poi vedere, utilizzare anche z-indici Ho dato, non hai bisogno di troppi valori elevati

Quando verifichi gli errori in css assicurati di rendere visibili i nodi e di rimuovere la loro opacità e non dare mai valori troppo alti per gli z-index. Prova questo, se non funziona guarderò da vicino.

Answer 2

Aveva lo stesso problema, voleva usare un div overlay con una png trasparente sopra un altro div. Abbiamo scoperto che z-index funzionerà solo su un elemento la cui proprietà position è stata esplicitamente impostata su absolute, fixed o relativa. Risolto il problema con il mio ipad z-index all'istante.

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