css中z-index 属性与用法详解
z-index规范参考
•在 W3C CSS2.1 规范中，每个元素都具有三维的空间位置，除我们所熟悉的水平和垂直位置外，元素还可在 "Z轴" 方向上层层相叠、依次向前排开；
•元素在 "Z 轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定。在文档中，每个元素仅属于一个层叠上下文。在给定的层叠上下文中，每个元素都有一个整型的层叠级别，它描述了在相同层叠上下文中元素在 "Z轴" 上的显示顺序；
•同一个层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则（back-to-font）；
•不同层叠上下文中，元素显示顺序以父级层叠上下文的层叠级别来决定显示的先后顺序。与自身的层叠级别无关；
•每一个定位元素都归属于一个stacking context。根元素形成 root stacking context，而其他的 stacking context 则由定位元素产生（此定位元素的 z-index 被定义一个非 auto 的 z-index 值），定位子元素会以这个 local stacking context 为参考，用相同的规则来决定层叠顺序；
•当任何一个元素层叠另一个包含在不同 stacking context 元素时，则会以 stacking context 的层叠级别（stack level）来决定显示的先后情况。也就是说，在相同的 stacking context 下才会用元素本身的 z-index 来决定先后，不同时则由 stacking context 的父元素的 z-index 来决定。
例子
| 代码如下 | 复制代码 |
| <html> <body> </html> | |
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
在IE下出现的问题
当定位元素的 'z-index' 未设置时（默认为 auto），在 IE6 IE7 IE8(Q) 下将会创建一个新的局部层叠上下文。而在其它浏览器下，则严格按照规范，不产生新的局部层叠上下文。
这个问题将导致定位元素的层叠关系在不同浏览器出现很大的区别，严重的可导致页面布局混乱、内容覆盖等。
受影响的浏览器有IE6 IE7 IE8(Quriks Mode)
直接从w3help复制了代码，分析以下代码：
| 代码如下 | 复制代码 |
| <style type="text/css"> <div style="position:relative;" class="p1">1 | |
解决IE7 绝对定位z-index办法
更多详细内容请查看：http://www.111cn.net/cssdiv/163/42221.htm
您可能感兴趣的文章：
css中z-index 属性与用法详解
css中z-index不起作用解决办法
图例详解网页制作中的绝对定位和相对定位
absolute与relative如何区分 怎么用？
IE下绝对定位(position:absolute)失效
纯CSS实现Tab页切换效果
CSS3 Transition属性使用详解
jquery ui dialog里调用datepicker的问题
CSS 中 position:absolute 与 z-index 对层次结构影响
CSS中绝对定位absolute和相对定位relative详解