Tengo dos elementos div absolutamente posicionados que se superponen. Ambos han establecido valores de índice z a través de css. Yo uso eltranslate3d webkit se transforma para animar estos elementos fuera de la pantalla y luego vuelve a la pantalla. Después de la transformación, los elementos ya no respetan su conjuntoz-index valores

¿Alguien puede explicar qué sucede con el índice z / orden de pila de los elementos div una vez que hago una transformación webkit en ellos? ¿Y explicar qué puedo hacer para mantener el orden de pila de los elementos div?

quí hay más información sobre cómo estoy haciendo la transformación.

ntes de la transformación, cada elemento obtiene estos dos valores de transición de webkit establecidos a través de css (estoy usando jQuery para hacer el.css() llamadas a funciones:

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

El elemento se anima usando el translate3d -webkit-transform:

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

Por cierto, he intentado configurar el tercer parámetro detranslate3d a varios valores diferentes para intentar replicar el orden de la pila en el espacio 3d, pero sin suerte.

También, los navegadores iPhone / iPad y Android son mi navegador de destino en el que este código debe ejecutarse. Ambos admiten transiciones de webkit.