Tenho dois elementos div absolutamente posicionados que se sobrepõem. Ambos definiram valores de índice z via css. Eu uso otranslate3d webkit transform para animar esses elementos fora da tela e depois voltar para a tela. Após a transformação, os elementos não respeitam mais o conjuntoz-index valores.

Alguém pode explicar o que acontece com o z-index / stack-order dos elementos div depois que eu faço uma transformação do webkit neles? E explique o que posso fazer para manter a ordem de empilhamento dos elementos di

qui estão mais algumas informações sobre como estou fazendo a transformaçã

Antes da transformação, cada elemento obtém esses dois valores de transição do webkit definidos via css (estou usando o jQuery para fazer o.css() chamadas de função:

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

O elemento é então animado usando a translate3d -webkit-transform:

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

Btw, eu tentei definir o terceiro parâmetro detranslate3d para vários valores diferentes para tentar replicar a ordem das pilhas no espaço 3D, mas sem sort

Além disso, os navegadores iPhone / iPad e Android são o meu navegador de destino no qual esse código precisa ser executado. Ambos suportam transições de webkit.