「translate3d」によって CSS の「z-index」の順序が崩れるのはなぜですか?それを修正するにはどうすればよいですか?

WebKit Transform Translate3d 後の CSS Z-Index 順序の維持

Web 開発では、望ましい視覚的階層を作成するには積み重ね順序が重要です。 CSS プロパティの Z-index は、この順序を制御する上で重要な役割を果たします。ただし、WebKit 変換 translation3d などの特定の変換を適用した後は予期しない動作をする可能性があります。

問題

異なる z-index 値を持つ 2 つの重複する絶対位置の DIV 要素を考えてみましょう。 。これらの要素をtranslate3dを使用して画面外でアニメーション化すると、画面に戻ったときに意図した重なり順が失われることがよくあります。

原因

この動作はWebKit変換に起因します。 3 次元 (Z 軸) で要素を移動する 3D の移動。その結果、ブラウザは z-index プロパティに依存してスタック順序を決定できなくなりました。

解決策

translate3d の後にスタック順序を維持するには、次のようにします。次の手法を使用できます:

1. 変換スタイルを利用します: flat:

   • 変換スタイルの適用: flat;変換された親要素内の子要素に。これにより、ブラウザーは子要素を 2D 平面でレンダリングするようになり、z-index 値が尊重されます。

追加の考慮事項

• transform-style プロパティはすべてのブラウザでサポートされているわけではないため、さらにブラウザ固有の設定が必要になる場合があります。回避策。
• この解決策は、変換された要素自体の重なり順には影響しません。その子要素にのみ影響します。
• 望ましい動作を確認するには、さまざまなデバイスとブラウザーでコードをテストします。

WebKit 変換 translation3d が z-index に及ぼす影響を理解し、適切な手法を実装することで、Web 開発者は、WebKit のスタック順序の制御を維持できます。要素を備え、一貫性のある予測可能なユーザー エクスペリエンスを保証します。

以上が「translate3d」によって CSS の「z-index」の順序が崩れるのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。