如果你不是一名csser新手，想必你對z-index的用法應該有個大致的了解了吧，z-index可以控制定位元素在垂直于顯示屏方向（Z 軸）上的堆疊順序，本文不去講述基本的API如何使用，而是去更深入的了解z-index是如何工作的，使用z-index的時候有哪些問題，以及z-index在日常開發中的使用。

下面我們通過一個例子來引入今天的正文，代碼示例：

如下圖：

上述代碼通俗易懂，下面有個問題請大家思考：
在遵循下述規則的情況下，如何使用紅色span元素在green和blue元素后面？
1) 不能以任何方式更改html標記；
2) 不能增加或改變任何元素的z-index屬性；
3) 不恩增加或改變任何元素的position屬性；
請大家思考，這個問題改如何解決？說明其原因？
———————————– 分割線 ———————————————-

1) 一個box和它的父親有相同的堆疊級別（stack level）,除非該box被通過z-index屬性賦予了不同的stack level;
2) z-index屬性只適應于position屬性為relative、absolute、fixed的元素對象；
3) 給一個被定位（positioned）元素設置小于1的opacity屬性值，意味著創建了一個堆疊上下文（stack context）,就像給該元素增加了一個z-index值；
4) 對于一個被positioned box，如果指定了z-index屬性，意味著：
->該box的stack level 在當前的stack context中；
->該box建立了個本地stack context;
5) 如果box沒有指定z-index，元素將被按下面的順序堆疊（stacked）（從后到前）：
-> 正常流中的boxes，根據在源代碼中的序列；
-> 浮動boxes;
-> computed后display屬性值為inline/inline-block/inline-table的boxes；
-> positioned boxes 和boxes 設置opacity值小于1，根據在源代碼中的序列；