IE6下的z-index无效的bug解决方法

有如下代码：

<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)。。。，也是没有用的。那么要如何解决这个问题呢？

有人可能会问，如果#b111一直上溯到它的祖先的过程中，如果出现有比＃a的z-index大的会怎么样呢？，很显然，＃b111一定会在#a1的上层（实际上从dom的层级来看，#b111比＃a1要晚两辈！！！）。这个时候就提出了一个问题：ＩＥ６是如何决定它们的层级顺序呢？

靠，IE6什么时候把我朝的特色也学了去，真是让人感叹啊！