Ho due elementi div posizionati in modo assoluto che si sovrappongono. Entrambi hanno impostato i valori di z-index tramite css. Uso la translate3d
trasformazione del webkit per animare questi elementi fuori dallo schermo e poi di nuovo sullo schermo. Dopo la trasformazione, gli elementi non rispettano più i z-index
valori impostati .
Qualcuno può spiegare cosa succede all'ordine z-index / stack degli elementi div una volta che ho trasformato un webkit su di essi? E spiegare cosa posso fare per mantenere l'ordine di stack degli elementi div?
Ecco qualche informazione in più su come sto facendo la trasformazione.
Prima della trasformazione, ogni elemento ottiene questi due valori di transizione del webkit impostati tramite css (sto usando jQuery per eseguire le .css()
chiamate di funzione:
element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });
L'elemento viene quindi animato utilizzando translate3d -webkit-transform:
element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });
A proposito, ho provato a impostare il 3 ° parametro su translate3d
diversi valori per provare a replicare l'ordine dello stack nello spazio 3d, ma senza fortuna.
Inoltre, i browser iPhone / iPad e Android sono il mio browser di destinazione su cui deve essere eseguito questo codice. Entrambi supportano le transizioni webkit.