要素の重なりについて少しハマってしまったのでメモに残しておこうと思います。
最近作ったサイトで、z-indexをどういじっても重なり順を直せない事象に遭遇しました。
ごちゃごちゃとした構造のサイトだったので初めは普通にpositionの親子関係によるものかなと思いましたが、全てのpositioinを洗い出しても解決せず…。
DeveropperToolでひとつひとつタグを見てみてようやく原因が判明。
どうやら導入していたプラグインによってタグに直書きされたstyleが原因のようでした。
（htmlやjsを開いて考えていたのでJS部分の直書きに気づくのが遅くなってしまいました…）
犯人は translate3d
問題となった直書きされたstyleは以下です。
style="width: 800%; transition: 0s; -webkit-transition: 0s; -webkit-transform: translate3d(-1960px, 0px, 0px);"
この中の translate3d(-1960px, 0px, 0px)が直らない重なり順の原因でした。
translate3dのz軸ってz-indexよりも強く（？）効果が発揮されるのですね…。
まだ使う機会が限られているとはいえ、スマホサイトを作るときなどには気をつけた方が良さそうです。
原因がわかれば解決は簡単で、重なりを直したいものにも translate3dを指定してz軸を調整してやるだけでなんとかなりました。
