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

必须承认我没有写出这个效果，思维很混乱。主要原因是我逻辑没有理清，这是重点，而后又在一些细节上纠结，使我一直觉得这个问题很复杂。对待一个问题，要先把它想得复杂——全面考虑问题，然后简单——理清思路，最后再复杂——注重细节。强调，逻辑分析很重要。

上网查看了一些代码，整理了两种方法，绝对不是原创。主要差别是在数据结构上。

方法一：array存储，Demo

方法二：json存储，Demo

一，背景知识–Select

这个问题主要处理对象是select，即对增加、删除select的option选项等。

1. 清空select

sel.length=0; 或 sel.options.length=0;   //两种写法都一样

2.添加option

（1.新建

var opt = document.createElement('option');
或 var opt = new Option(str, str);

（2.添加

try{
    sel.add(opt, null);    //IE6,7不支持  
}catch(ex){
    sel.add(opt);
}
或sel.appendchild(opt);
或sel.options.add(opt);//都能识别,不知道是否标准

3. 选中

获取：sel.selectedIndex, 返回数值，默认为0；设置：sel.options[i].selected= true/false。

二，关键点

这个问题概括为获取数据，填充数据，即两重循环。选择一个选项，则用通过循环获得和该选项相关联的数据；遍历之后的select，填充相应的数据。这里数据结构是关键，不同的数据结构就决定了读取的效率。个人觉得方法一的效率比较高。

方法一采用数组结构，更为准确的说法，是关联数组，最为巧妙的地方在于索引值的设计。通过遍历select，获得当前select的被选项目的索引号，并连成字符串，例如“1_1_1”，则通过array['1_1_1']就可以获取所需的数据。

方法二采用的是json结构，这种结构值得推荐。但在获取数据时，要遍历整个数组里的json对象，通过对比选中的select的value值和json对象的’val’属性值，以获取下级的数据。数据量较大时，这个方法确实不太好。

这两种方法，还有一些细节也不太相同，比较繁琐就不介绍了。不过被我重写后，有些代码也不够优雅，而且我希望这个控件可以提供较好的数据输入的接口，继续纠结中……

转自：http://lifesinger.org/blog/2009/09/js-optimization/

PS:“设计API，输入和输出，关键数据结构”，最近写JS最头疼的就是这个地方，很关键.