transformとz-indexでハマる

2016年6月21日

二つの要素のz-indexを設定をするも、思うようにいかない。

結局わかったのは、ひとつの要素にtansformが設定されていて、
そちらが優先されていた。
-webkit-transform: translate3d(0px, 0px, 2px);
三つ目の引数がz軸の値。
z-indexだけ設定されていた方に
-webkit-transform: translate3d(0px, 0px, 12px);
として解決した。

後日談:
Android2.2でtranslate3dが効かないなど、対応していないデバイス用にz-indexも記述しておく。