引用
hacker0825 的 網頁層疊z-index用法詳解（轉載）最近在做定義元素順序的時候，用到z-index屬性，中間出了點小插曲，所以整理了一些資料給大家分享。希望對z-index屬性和用法還不太瞭解的朋友有一定的幫助。
z-index定義：
名稱：z-index
分類：定位
簡述：設置對象的層疊順序
概述：z-index是設置對象的層疊順序的樣式。該樣式只對position屬性爲relative或absolute的對象有效。這裏的層疊順序也可以說是對象的“上下順序”。它是一組css定位元素中的一元，要配合position使用．
可能的值
值 描述
auto 默認。堆疊順序與父元素相等。
number 設置元素的堆疊順序。
提示和註釋
註釋：元素可擁有負的 z-index 屬性值。
註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！說明
z-index屬性適用於定位元素（position 屬性值爲 relative 或 absolute 或 fixed的對象），用來確定定位元素在垂直於顯示屏方向（稱爲Z軸）上的層疊順序（stack order）。每一個定位元素都歸屬於一個stacking context。根元素形成root stacking context，而其他的stacking context則由定位元素產生（此定位元素的z-index被定義一個非auto的z-index值），定位子元素會以這個local stacking context爲參考，用相同的規則來決定層疊順序。並且stacking context和 containing block 之間並沒有必然聯繫。
當stacking context一樣的時候，就用z-index的值來決定怎樣顯示，如果z-index也相同（即stack level相同），則按照檔中後來者居上的原則（back-to-front ）的順序來層疊。
當任何一個元素層疊另一個包含在不同stacking context元素時，則會以stacking context的層疊級別（stack level）來決定顯示的先後情況。也就是說，在相同的stacking context下才會用z-index來決定先後，不同時則由stacking context的z-index來決定。例如：
定位元素A（z-index:100）裏面有定位元素A1（z-index:300），而定位元素B和元素A兄弟關係（z-index:200）。你會發現無論A1的z-index是多大，也會被z-index是200的B所覆蓋，因爲A的z-index只有100。
實例
本例改變元素的堆疊順序：<html>
<head>
<style type=”text/css”>
#img1
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
<script type=”text/javascript”>
function changeStackOrder()
{
document.getElementById(”img1″).style.zIndex=”1″;
}
</script>
</head>
<body>
<h1>This is a Heading</h1>
<img id=”img1″ src=”bulbon.gif” width=”100″ height=”180″>
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
<input type=”button” onclick=”changeStackOrder()”
value=”Change stack order” />
</body>
</html>
