首先要声明，万恶的ＩＥ６！
有如下代码：
<div>
<div id="a">
<ul id="a1">
<li>....</li>
</ul>
</div>
<div id="b">
<div id="b1">
<div id="b11">
<p id="b111"></p>
</div>
</div>
</div>
</div>
现，假设有
#a{position:relative;float:left;}
#a1{position:absolute;top:0;left:100px;z-index:999'}
#b11{position:relative;float:left;}
#b111{position:absolute;top:0;left:0;}
那么，在chrome.Firefox下，＃a1的确是的#b111上面。这是没有问题的。但是一到ＩＥ６下一看，傻了！＃b111居然盖在#a1的上面。不是#a1的z-index已经是999了啊，而#b111才是0啊！999 > 0 (绝对真理)！！！
为什么ＩＥ６下会是如此让人蛋疼的事情呢？
原来ＩＥ６按先后出现的顺序来绝定层的堆叠顺序，而对#a1的z-index:999置之不理，所以，无论你把#a1的z-index:999999999999999...(以下省支300000个9)。。。，也是没有用的。那么要如何解决这个问题呢？
办法很简单：将#a1的父元素a的z-index设到大于#b111的父元素#b11，那么就有：
#a{position:realtive;float:left;z-index:998;}
这样#a1就可以盖在#b111上了。
有人可能会问，如果#b111一直上溯到它的祖先的过程中，如果出现有比＃a的z-index大的会怎么样呢？，很显然，＃b111一定会在#a1的上层（实际上从dom的层级来看，#b111比＃a1要晚两辈！！！）。这个时候就提出了一个问题：ＩＥ６是如何决定它们的层级顺序呢？
答案就是：拼爹（也可能是爹的爹，爹的爹的爹，爹的爹的爹的爹...）！！！ 总而言之，谁的祖先z-index最在，谁就在最上面！谁的背景（后台）z-index最硬，谁就在最上面。
靠，IE6什么时候把我朝的特色也学了去，真是让人感叹啊！