Safariで、
.layer1 { transform: rotateX(45deg) }
.layer2 { z-index: 1; }
rotateXさせている.layer1の上に.layer2を乗せたい時。
Chromeなどでは問題なかったのだが、Safariではなんと、.layer1が上に来る。
どうやら、Safariではz-indexよりtransformのz軸のほうが強いみたいです。（まあ3D空間で考えたら自然ではありますよね…）
なので、transform: translate-zとかで調整すると解決するっぽい。
で、その理由は、
ちゃんとまだ理解しきれていないが、Stacking Context（重ね合わせコンテキスト）
の影響らしい。
