如果你不是一名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，根据在源代码中的序列；
新闻热点
疑难解答
