爲什麼z-index僅適用於定位元素？

我知道z-index只適用於定位元素，但我想知道爲什麼會出現這種情況。這種行爲有沒有很好的理由，還是僅僅是這些半任意規格決定中的一個？爲什麼z-index僅適用於定位元素？

HTML

<div> 
    <img class="not-positioned" src="http://placekitten.com/g/200/300"> 
    <img class="positioned" src ="http://placekitten.com/g/400/500"> 
</div>

CSS

img { 
    border: 2px solid black; 
} 

.positioned { 
    position: relative; 
    left: -60px; 
    z-index: 1; 
} 

.not-positioned { 
    z-index: 99; 
}

http://jsfiddle.net/666nzL6j/

你會發現，這個根據工作原理：

使用如下代碼工作時，我碰到這個問題規範（.not-positioned圖像是背後的.positioned儘管.not-positioned的z-index值更高），但我很難理解此行爲的基本原理。

謝謝。

來源

2015-02-11 Blake Frederick

簡單的谷歌搜索http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ – crazymatt 2015-02-11 22:20:41

元素定位在所有3個維度

使用left和right
使用top和bottom
使用x軸z-index

當然z-index與其他人不是100％相似，因爲它只描述了一個stackin g而不是「真實」的位置，但這就是你可以在z軸上執行的所有操作，因爲在該軸上沒有固定的邊界。

所以，如果你想設置其z-index，你需要給一個元素position而不是static。如果你的問題很簡單，只要在你的榜樣，你也可以給其他元件，負z-index

.positioned { 
    position: relative; 
    left: -60px; 
    z-index: -1; 
}

來源

2015-02-11 22:19:03 mmgross

感謝這個解釋，以及一個將z-index設置爲-1的備用方法。 – 2015-02-11 22:53:26

從Mozzilla - https://developer.mozilla.org/en-US/docs/Web/CSS/position

位置的CSS屬性選擇替代規則定位元素，旨在用於腳本動畫效果。

因此，爲了更改元素位置，您需要告訴它不是靜態的，並且通過應用位置屬性來實現。

延伸閱讀： https://developer.mozilla.org/en-US/docs/tag/Understanding_CSS_z-index

來源

2015-02-11 22:21:16 Und3rTow

爲什麼z-index僅適用於定位元素？

回答

相關問題