12

に複数の画像がありDIV、それらが重なるように絶対に配置されているが、z-index が定義されていないとします。

CSS

img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

HTML

<div>
    <img src="...">
    <img src="...">
    <img src="...">
</div>

Safari と Chrome では最後の要素が一番上に表示されることに気付きました。これは標準的な動作ですか？言い換えれば、ほとんどのブラウザーが最後の要素を一番上に表示すると想定するのは比較的安全でしょうか?

4

3 に答える 3

16

はい、想定しても安全です。W3Cによると:

各ボックスは、1 つのスタッキング コンテキストに属します。特定のスタック コンテキスト内に配置された各ボックスには整数のスタック レベルがあります。これは、同じスタック コンテキスト内の他のスタック レベルに対する z 軸上の位置です。スタック レベルが大きいボックスは常に、スタック レベルが小さいボックスの前に配置されます。ボックスのスタック レベルがマイナスになる場合があります。スタック コンテキストでスタック レベルが同じボックスは、ドキュメント ツリーの順序に従って、背面から前面にスタックされます。

于 2012-10-02T17:37:38.787 に答える
2

通常、最後にアクティブ化されたものが一番上になります。

div a is z-index 10, and appears first in the document

div b is z-index 10, and appears second in the document

ドキュメントがレンダリングされると、b は a の上になります。

a を変更すると、それが一番上に表示される可能性があります。

基本的に、b の上に a を表示する必要がある場合は、'a' にクリック ハンドラーを配置してそれを上げる必要があります。

于 2012-10-02T17:37:58.080 に答える
-1

ブラウザによって読み取られた同じ位置の最後の画像が表示されます。はい、すべてのファイルが 1 行ずつ読み取られるため、すべてのブラウザーに当てはまります。

于 2012-10-02T17:35:41.917 に答える