具有相同z-index的絕對定位元素：哪一個元素位於頂部？

Question

假設你有一個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會顯示最後元素在上面。這是標準行爲嗎？換句話說，是否相對可以安全地假設大多數瀏覽器都會顯示最後一個元素？

Answer 1

是的，這是安全的假設。按照W3C：

每個框屬於一個堆疊內容。給定堆疊上下文中的每個定位框在 中都有一個整數堆棧級別，它是相對於同一個 堆棧上下文中的其他堆棧級別在z軸上的位置。具有較高堆疊等級的盒子總是在具有較低堆疊等級的盒子前格式化爲 。盒子可能有負數 堆棧級別。 根據文檔樹順序，在堆疊環境 中具有相同堆疊級別的框被堆疊到前後。

Answer 2

顯示瀏覽器讀取的同一位置的最後一幅圖像。是的，所有瀏覽器都是如此，因爲所有文件都是逐行讀取的。

Answer 3

一般情況下，最後一次激活會在最上面。

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'上有一個點擊處理程序來提升它，如果你將需要一個出現在b之上的話。