CSSの重複要素のデフォルトルールは何ですか？

Question

私はw3schoolsを通して自分自身とhtmlとCSSを教えようとしていますが、z値が指定されていないと、htmlコードの最後に配置されている要素が上に表示されます。しかし、their exampleでは、画像のZ-インデックスをコメントアウトして、何も指定されていなければ、画像はまだ上に表示されます。下から上への順番は見出し、次にイメージ、そして段落はコード内で指定された順番でなければならないのですか？彼らの特別な重複ルールは、私が気づいていないものですか？

P.S.私はthis questionを見つけました。これは、テキストがHTMLの最後に来るにもかかわらず、テキストの上に現れる別のイメージのインスタンスを参照していますが、この動作に理由はありません（代わりに、適切なz-indexコードのみが推奨されます）。しかし、私は、なぜこれが起こっているのかを知りたいのですが、テキストをz-indexで一番上に置く方法ではありません。

Answer 1

これは、画像が絶対的に配置されているためです。

1. 背景とスタッキングコンテクストを形成する要素の境界：spec、

   から各スタッキングコンテクスト内で、以下の層は、バック・ツー・フロント順 に描かれています。

2. 負のスタックレベルを持つ子スタッキングコンテキスト（負のものが最も多い）。
3. インラインで、インラインでないレベルの、配置されていない子孫。
4. 位置付けされていない浮動小数点。
5. インライン・テーブルとインライン・ブロックを含む、インライン・レベルの非配置の子孫です。
6. スタックレベル0の子スタッキングコンテキストと、スタックレベル0の配置済み子孫コンテキスト。
7. 正のスタックレベルの子スタッキングコンテキスト。

あなたがz-indexを削除すると、画像がステップ3で、段落の前にステップ6で塗装し、ステップ5

Answer 2

両方の要素にデフォルトのz-インデックス（0に相当）がある場合、絶対配置された要素は、位置指定が設定されていない要素の上に配置されます。

Answer 3

で段落のテキストはここに私の仕様の一部ですhttps://www.w3.org/TR/html5/embedded-content-0.html#the-img-element

これは、ブラウザがドキュメントの上部から下部に要素をレンダリングしますが、イメージ要素のsrcはドキュメントがロードされた後に受け取らなければならないと解釈しています。明らかに追加のHTTPリクエストが必要です。これは、通常の要素の後にイメージの内容がレンダリングされることを意味します。したがって、Z-インデックスを指定しないと、イメージは上にレンダリングされます。

つまり、ブラウザはまずHTTPリクエストを介してサーバーにHTMLドキュメントを受信します。そのHTML文書には、属性を持つ<img>タグがあり、その画像タグの実際のファイルに対して別のHTTP要求がサーバーに送信されます。 z-indexが設定されていないと、ブラウザは単に他の要素の上にその画像を描画します。

これは私の推測です。私はいくつかの実験をして試してみましたが、検査官を使って画像にデフォルトのz-indexがあるかどうか確認しましたが、そうはありません。

EDIT：

オリオールは、W3Schoolsの例を説明する仕様、だけでなく、他のコードでに指摘したように、あなたがにリンクされているスニペット：その場合はImage overlapping over div

、それは<img>要素のように見えますインラインであるのでステップ5で描画されますが、<div>はステップ3で描画されます。