順で重なって表示されます。順で表示されてしまっています。要素の表示順に関して調べて見ると、2Dと3Dで異なる値を使用しているようです。それぞれ以下のプロパティの値で制御しているとのこと。表示順制御値2Dレンダリングz-indexの値3Dレンダリングtransformのz軸の値(translate3d(0,0,●)またはtranslateZ(●))今回の事象は、このz値にsafariの不具合が関連して発生しているらしい。translate3dこちらに同事象についての詳しく書かれていました。理解できなかった部分があったので個人的な解釈が入りますが、2Dも3Dも基本的にはそれぞれのグループ内で表示順が保持されるしかしsafariでは3Dアニメーションを行うとき元のz-indexが失われてしまうこの時アニメーションされた要素のz軸が別のz-indexグループにいれられるため、他のz-indexを無視して前にでてきてしまうこういうことのようです。これを解決するには、それぞれのz-indexを保持してもらう必要があるので、3D要素を包む要素に、transformのz軸の値を指定して順番を指定してあげればいいとのこと。親要素にtransformのz軸を指定することで解消ためしてみます。指定していたり、複雑な構成だったりする場合は1行では解決しないかもしれないので、transform関連のプロパティを色々いじってみましょう。まとめ最初にも書きましたが、safari以外のブラウザでもtransformのz軸を調整したらz-indexが正常に効くようになったという事例がいくつかありました。z-indexが効かなくて困ったら、まずはtransformのz軸を確認してみましょう。WORDPRESS(13)Profilekatori在宅フリーランスのWebデベロッパー(フロントエンドエンジニア、コーダー)です。東京の上野谷根千界隈でまったり仕事してます。