因為我們直覺的以為HTML網頁是二維平面，因為文字、圖像或其他元素都是按照順序排列，但，實際的網頁是三維立體的，元素之間可能會發生堆疊（重疊），可以透過CSS 中的z-index 屬性來設定元素的堆疊順序。
1. z-index屬性的意義
一個元素在文件中的層疊順序，用來確認元素在目前層疊上下文中的層疊層級。擁有較高堆疊順序的元素總是會處於堆疊順序較低的元素的前方。
（1）z-index的屬性值越高越前。
（2）元素可擁有負的z-index 屬性值。
（3）z-index 跟上具體數字。
（4）z-index的數值不跟單位。
如下圖所示：
如上圖所示，這個屬性的名字由座標系統得來，其中從左向右是x軸，從上到下是y軸。從螢幕到使用者是z軸。在這個座標系中，較高z-index值的元素比較低z-index值的元素離使用者更近，也就是說較高z-index值的元素最先呈現在使用者的視野，這會導致較高z-index值的元素覆蓋其他元素，這也稱為堆疊或疊放。
透過z-index 屬性您可以建立更複雜的網頁佈局，z-index 屬性的選用值如下表所示：
關於元素的層級關係有以下幾點要注意：
（1）未設定position 屬性的元素或position 屬性的值為static 時，後定義的元素會覆寫前面的元素；
（2）對於設定有position 屬性且屬性值不為static 的元素，這些元素會覆寫沒有設定position 屬性或position 屬性值為static 的元素；
（3）對於position 屬性值不為static 且定義了z-index 屬性的元素，z-index 屬性值大的元素會覆蓋z-index 屬性值小的元素，即z-index 屬性值越大優先級越高，若z-index 屬性值相同，則後定義的元素會覆寫前面定義的元素；
（4）z-index 屬性僅在元素定義了position 屬性且屬性值不為static 時才有效。
2.z-index應用案例
舉例：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>CSSz-index</title><styletype=text/css>div{width:200px;height:200px;text-align:center; font-size:50px;line-height:200px;position:absolute;}#red{left:100px;top:100px;}#green{left:200px;top:200px;}</style></head><green{left:200px;top:200px;}</style></head>< body><!--Z-index層疊性原則：1.同層級元素(或position:static)預設在文件流程後面的元素會覆寫前面的。 （後來居上）2.對於同等級元素，position不為static且z-index存在的情況下z-index大的元素會覆蓋z-index小的元素，即z-index越大優先級越高。 --><divid=redstyle=background:red;z-index:0;>A</div><divid=greenstyle=background-color:green;>B</div><divid=bluestyle=background-color: blue;z-index:-1;>C</div></body></html>運行結果：
z-index的一些理解誤區
一般我們會說：z-index屬性只有和定位元素（position不為static的元素）一起使用的時候，才起作用，那首先這種說法是錯誤的，因為在css3中flex盒子的子元素也可以設定z-index屬性。