最近在弄网站的时候出现个问题，也是之前一直没去解决的，一个非常简单的问题，花了我几个小时的时间一步步去查找，如果平时的知识点能好好的积累的话，根本没必要花这样的冤枉时间，NND。

我习惯于用css的position属性去制作网页的头部跟其他我觉得没必要去float的东西，说实话挺讨厌float的，老是需要清除浮动以至于得到满意的效果。用position的话，不仅可以考虑在去掉css的情况下html文档的重点输出顺序，还可以减少不必要的嵌套代码，更重要的就是自由，爱放哪放哪。

这次的问题出现在position:relative同辈元素的z-index设置上，一般同辈元素都是靠z-index去定位层级，z-index数值越大者越居上。在例子中#header跟#ibanner为同辈元素，在不设置z-index值的情况下，因为#ibanner的html输出在#header的后面，所以#ibanner层对比#header层来说是居上叠加的，看Demo1

Demo1在IE(IE6、IE7、IE8，Jquery紧支持IE6+)浏览器下，很好的证明的这点。但在非IE浏览器下.nav的z-index属性值战胜了#ibanner，跑到上面去了。.nav的父辈元素是#menubar祖辈元素是#header，没理由啊，想不通，后来看了14px发布的《层叠加的五条叠加法则》后才明白过来，原来白为IE鼓掌了，最后变成又是IE的问题了。

接下来最终目的是要把.nav的层级提高，那么只需要搞定IE就行了，这个就简单了，设置#header跟#ibanner的z-index值就OK了。看Demo2（中间迷失了一个多小时，以为#ibanner设置z-index值就OK了，一直在测试就是不行，还用上了判断为IE浏览器的时候，#ibanner的z-index值为-1，太扯了，太瞎了。还有个可能是jquery的问题。）

我是明白过来了，估计看这篇文章的人一下子反应不过来，去看下14px发布的《层叠加的五条叠加法则》就清楚了，自己测试摸索吧，这样才记得牢。