マージンが負の Div が別の Div のコンテンツと背景 * の間* にスライドして見えるのはなぜですか?

要素の重なりによるコンテンツの重なり: パズルを理解する

はじめに

このコンテキストでは、何も含まれていない 2 つの div があります。複雑なスタイル (単純な背景色)。負のマージントップを適用することで、2 番目の div を最初の div に重ねるように操作しています。ただし、一方の要素がもう一方の要素と完全に重なっているのではなく、2 番目の div がコンテンツと最初の div の背景の間をスライドし、予期しない動作を示していることがわかります。

ペイント オーダー

この動作を理解するには、ブラウザーでの描画順序の複雑さを詳しく調べる必要があります。スタッキング コンテキスト内の要素の描画順序は、事前に定義された順序に従います。

1. 要素の背景色 (ルート要素であっても)。
2. 要素の背景画像 (ルート要素であっても)これはルート要素です。
3. 下から上に描画されるテキストや画像などの要素のコンテンツtop.
4. 子要素の背景と境界線。

重なりの説明

この例では、2 番目の div が最初の div と重なっている場合、次の描画シーケンスが発生します:

1. 2 番目の div の背景色最初の div の背景の上にペイントされます。
2. 最初の div のコンテンツがペイントされます。
3. 2 番目の div のコンテンツが最初の div のコンテンツの上にペイントされます。

最初の div のコンテンツは 2 番目の div の背景より前に描画されるため、テキストは緑色の背景の上に配置されているように見え、 2 番目の div はそれらの間をスライドしています。

動作の変更

デフォルトのペイント順序ではそのような状況が発生する可能性がありますが、不透明度を設定することで動作を変更することができます。重なり合う要素を 1 未満の値に設定します。これにより、コンテンツのペイント ステップの前に不透明度のペイント ステップがトリガーされ、重なり合う要素の背景がその下に表示されるようになります。 content.

この例では、2 番目の div に opacity: 0.9999 を追加すると、期待どおりの動作が得られ、緑色の背景が最初の div のコンテンツを完全に覆います。

Reference

CSS ペイント順序の詳細な説明については、公式 W3C を参照してください。ドキュメント:

https://www.w3.org/TR/css-backgrounds-3/#box-painting

以上がマージンが負の Div が別の Div のコンテンツと背景 * の間* にスライドして見えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。