applezqp

之前一直对z-index感到有点迷惑，看了众多博文后，觉得最经典的还是w3c的规范。但是偶英文不佳，其中Appendix E. Elaborate description of Sstacking Contexts这篇文章没有看懂，网上流传的CSS 2.1的中文翻译也没有翻译此篇幅。求人不如求己啊……呜呜，希望有朝之日可以看懂。除了W3C的z-index,元素层叠级别（stack level）及z-index剖析也很不错。

一，误区

1. z-index属性只能工作于那些被定义了position属性的元素中，这里不包括position:static。

2. z-index的负值：z-index值为负的定位元素在“父级stacking context的背景、边界”之前，在“父级stacking context的内容”之后。除了FF2.0，它的“z-index值为负值的定位元素”在父级stacking context的背景”下面。PS：有一些条件能够使元素产生stacking context，这些条件就是困惑的所在。

二，理解——stacking context & stack level & z-index

stacking context

每个元素都在一个stacking context下，最初的stacking context（即root stacking context）由根元素产生。一般页面的根元素是body，但是当设置了html的颜色时，html就成了根元素（奇怪吗？遇到一个现象，自己觉得这样理解通顺一些）。那么哪些条件可以产生stacking context呢？

1. 1. 定位元素并且定义了z-index为非auto；
2. 2. FF, Safari, Chrome下元素设置opacity属性（1除外）会产生stacking context；(除了Opera)
3. 3. IE6,7下的定位元素，另一种说法是，对于有定位而没有设置z-index的元素，在IE中默认为z-index:0，而z-index:auto也会默认z-index:0。总而言之，IE6,7下的定位元素，无论设置了z-index，或无论z-index设置成什么值，都会产生新的stacking context。

stack level

有的人认为stack level同z-index相同，也有人认为它们是不同的概念。我认为理解成不同好一些。页面中的元素都有stack level，但未必都定义了z-index。

下面是w3c关于stack level的规则的介绍

Each stacking context consists of the following stacking levels (from back to front):

1. the background and borders of the element forming the stacking context.
2. the stacking contexts of descendants with negative stack levels.
3. a stacking level containing in-flow non-inline-level non-positioned descendants.
4. a stacking level for non-positioned floats and their contents.
5. a stacking level for in-flow inline-level non-positioned descendants.
6. a stacking level for positioned descendants with ‘z-index: auto’, and any descendant stacking contexts with ‘z-index: 0′.
7. the stacking contexts of descendants with positive stack levels.

其中IE8, FF3.0,Safari, Opera, Chrome都是按这个原则正确解析的，IE67下“float元素”和“block元素”属同一stack level，而“inline元素”较其stack level低。

z-index

页面中元素在Z轴方向上的排列，先由stacking context决定，相同的stacking context下的则有stacking level决定，相同的stacking level则有z-index决定。

三，IE的特殊性

1. IE-6 select标签不识别z-index, 即某个元素设置了z-index，select仍会位于它之上。

2. 上文中提到在IE6,7下，设置position:relative的元素会产生stacking context。而一些效果，例如鼠标经过，出现提示框，在IE7-下就会有bug，Demo(注：它在IE6下没有任何效果，下文解释)。目前有两种解决方法：方法一，position:relative/absolute无法冲破的等级；方法二：Fixing IE z-index，这种方法用到了JQ，好像有点大材小用，但却提供了另一种思维。

跑题——IE6下:hover的触发

在写测试页面时，发现在IE6下什么效果都没有，顿时蒙了，本来以为z-index应该想明白了，难道还有遗漏？原来这是IE6的另一个Bug，关于:hover的触发。IE中伪类:hover的使用及BUG一文详细地分析了这个Bug。

对于a:hover{}只要设置width，positon，background，font-size，font-weight，font- family，border，float，display，font-style，margin，padding，text- align，overflow，text-transform，text-indent，vertical-align这些属性（除text-decoration，color，z-index，其中display不建议使用）就可触发:hover。

但是Demo1, Demo2IE6下表现的还是很奇怪，原来a:hover span{}下也要设置以上属性。这次跑题是个意外的收获。最终正确的Demo，真是“纸上得来终觉浅，绝知此事要躬行”

主要参考

1. 元素层叠级别（stack level）及z-index剖析
2. Specifying the stack level: the ‘z-index’ property
3. Appendix E. Elaborate description of Stacking Contexts
4. position:relative/absolute无法冲破的等级
5. IE中伪类:hover的使用及BUG