主题：position:relative/absolute无法冲破的等级

前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题：

1. <ul>
2. <li>第一块</li>
3. <li><span>第二块</span></li>
4. <li>第三块</li>
5. <li>第四块</li>
6. <li>第五块</li>
7. </ul>

如果我我们设定LI为position:relative;设置span为position:absolute;那么我们会发现无论SPAN的z-index值设置得再高都将永远在后面父级的下面。

1. *{margin:0; padding:0; list-style:none;}
2. li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;}
3. li span {width:200px; height:100px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}

 试一下很容易发现我们的子级，z-index的值达到了1000的被设定了position:absolut;子级都被档在了父级的下面。我想了很久，我觉得其根本问题是：设置同样的position:relative/absolute;同级标签之间的等级是无法用z-index超越的。我们上面的例子中的第一个LI的等级永远都要小于后一个LI的等级，所以我们在LI里的子级身上设置了position:absolute;，给了非常高的z-index值。

也许你会这样来想：只要针对有span的LI设置position:relative;不就好了吗？非常正确。当其它的LI都不设置position:relative;那么我们需要的那个子级就可以浮在所有的内容之上。但是如果实际上，所有的LI中都要有span，并且属性都需要一样怎么办？当然我们不大会需要有这样的效果。但是我们需要有这样的效果：子级全部是隐藏的，当有鼠标反应时出现并且浮在所有的内容之上。我们要知道，这确实是件让人头疼的事，因为我们上面见识到了，子级在显示的时候都被压在了下一个父级标签的下面。下面我们来实现一下这个鼠标反应的定位效果：

1. <ul>
2. <li><a href="" title=""><span>第一块</span></a></li>
3. <li><a href="" title=""><span>第二块</span></a></li>
4. <li><a href="" title=""><span>第三块</span></a></li>
5. <li><a href="" title=""><span>第四块</span></a></li>
6. <li><a href="" title=""><span>第五块</span></a></li>
7. </ul>

我们通过链接的鼠标事件来完成这个显示隐藏效果：

1. *{margin:0; padding:0; list-style:none;}
2. li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
3. li a {position:relative; z-index:1; display:block; height:100px; width:100px;  background:#000;}
4. li a:hover {background:#000000;}
5. li span {display:none;}
6. li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000;}

我们设定了a为position:relative;这样他的子级就会根据父级的左上角为坐标原点进行定位了。然后我们设定span的具体形状以及定位属性，然后把他隐藏了。我们再通过A的伪类:hover使得span被激活。我们看一下结果，我们会发现，所有应该在上面的现在全在下面了。那我们怎么解决这个难题呢，其实以CSS想强行突破是不太可能，所以我们反过来想，能不能让这个没有被触发的父级标签没有position:relative;属性，而只是触发的时候才有级这个父级赋上这样的值？其实想到这里基本上已经可以解决所有的问题了：

1. *{margin:0; padding:0; list-style:none;}
2. li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
3. li a {display:block; height:100px; width:100px;  background:#000;}
4. li a:hover {position:relative; z-index:1; }
5. li span {display:none;}
6. li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }

我们只要针对a:hover来设定其属性为position:relative;就可以了，这样只有在鼠标触发的时候A才会被赋于一个相对定位的属性。这样就完成可以解决被其它父级标签所挡的尴尬了。

当然如果不介意IE5这样的浏览器我们还可以把代码再做简化：

1. <ul>
2. <li><span>第一块</span></li>
3. <li><span>第二块</span></li>
4. <li><span>第三块</span></li>
5. <li><span>第四块</span></li>
6. <li><span>第五块</span></li>
7. </ul>

CSS可以改成这样：

1. *{margin:0; padding:0; list-style:none;}
2. li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}
3. li:hover {position:relative; z-index:1;}
4. li span {display:none;}
5. li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }

补遗《无法冲破的等级》

早前就有人对《无法冲破的等级》一文提出不同的看法，认为“无法冲破的等级”只是IE的BUG，但是我自己在做测试的时候都发现并未出现差错，所以一直都对此不以为然。事实胜于雄辩，有实例的证实我觉得我一点也没错。但是今天网友“平淡人生”提供的实例我发现完全打破了我原来的想法。后来根据对实例的分析，我发现，这里有一个问题并没有讲清楚，正是因为这点才使得这篇文章受到了一定的争议。下面我就对这个之前疏忽的问题再做一次补充：

先给出两个不同的例子来看一下：

 留心一点已经发现了，这两个例子中，不同的是第一个例子中的父级有z-index属性，第二个例子中的父级没有z-index属性。但是这两个例子在IE中的效果是一样的，不论子级设为多高，都无法超越父级。但是在Firefox或是Opera等浏览器中就会出现不一样，第一个例子的情况与IE同，而第二个例子在Firefox或是Opera等浏览器中却突破了父级。

由此看来，严格的等级限制还是存在的，只是在Firefox与Opera等浏览器中对于父级如若Z-index:auto;那么子级还是会如同自由的飞鸟不会被任何物体所限制，当然前提是子级的Z-index的属性值必需要大于0。这时也许我们就理解了，其实在IE中早就默认了所有的定位元素的Z-index:0;所以才出现了无法冲破的等级。

虽然在父级没有设定Z-inex属性值时子级在Firefox与Opera浏览器中都能浮动父级之上，但是必竟IE在这点上还是有差别的。所以在使用上还是需要用到《无法冲破等级》一文中提及的解决办法。