最近几天在做一个网站建设项目，我负责的一个前端模块，主要是多级菜单的，其实就用到了position:relative;和position:absolute;结果就出现了一个常见的IE7及一下浏览器的bug，而chrome、火狐、IE7+都没有出现这样的问题。那么是什么问题呢？就是因为为了对元素进行绝对定位并让它优先显示，但在IE7下无效。先来看拆分的代码（以下代码实际上不是项目模块本身的代码，而是为了在这里重现这个现象，随意写的类似代码）。

HTML部分。

<div class=”top”>
<div class=”t”>
<div class=”post”>今天得关注我</div>
</div>
</div>
<t;div class=”bot”>
<div class=”post”>2</div>
</div>

CSS部分

.top{ height:100px; width:400px; margin:0 auto; background:#f00; position:relative;}
.top .t{ width:200px; margin:0 auto; position:relative; z-index:10;}
.top .post { position:absolute; top:100px; left:0; width:100px; height:120px; background:#000; color:#fff; line-height:100px; text-align:center; z-index: 100;}
.bot{ height:200px;width:400px; margin: 0 auto; background:#ccc; position:relative;}
.bot .post{ position:absolute; bottom:10px; right:10px; width:20px; height:20px; background:#fff; z-index:99;}

这就是项目出现问题模块的一个简化版HTML+CSS，当然实际上项目中比这里要复杂多，包含还有JS等等。而这里的代码足以重新这个BUG了，首先我在我做习惯使用的Chrome看效果。

在Chrome下完美无缺，实现了我们的需求，我们要显示出来的.top .post完美显示，也许在这个时候可能粗心大意的朋友就开始庆功了。不过为后面的缺陷埋下了伏笔，结果被测试的童鞋一看就会发现问题了。
于是就有了IE7跟z-index的狗血剧情；当然前端er都比较讨厌IE7及以下版本的IE浏览器，但是没办法，说叫人家这么牛逼了，咱得从。不然不管是谁的问题，最终都会说是你的问题。看看IE7下的结果吧。

既然有问题了，那么就得解决嘛。其实针对这个问题网上有大量类似情况的解决方案，但现在回头看这些，似乎说得非常不清楚，当然我们这里接下来说的也可能不是太清楚，但至少比我所看到的那些，是清楚的。网上已经有的解决方法的中心思想就是：

这是IE7渲染DOM的问题，我们把父层的容器用position定位的时候（position:relative;），子层的z-index不管设置多高数值都会被重置。既然问题找到了，我们也就知道解决的方法了，只要把父层加上z-index值就好了。

这句话其实特别好理解，也是正确的解决方式，但不够详细，比如有的小白可能就会认为我上面的这个代码就是符合这个思路的（.top .post的父级.top .t不就是设置了一个z-index么？），但为什么还是不行呢？仔细的童鞋就会看到再往上还有个.top也有一个position:relative（这是为实现需求的一种需要才这样写的）。关于这个问题，其实用google搜索就会发现很多真正去分析这个问题的文章，比如http://w3help.org/zh-cn/causes/RM8015，而至于百度就得了吧，很多都是复制过来没经过自己大脑的。而如果直接为解决问题而解决问题的话，实际上这个地方只需要加一个z-index就可以了。

.top{ height:100px; width:400px; margin:0 auto; background:#f00; position:relative;z-index:10;}

而网上复制过来的答案说父级的一定要大于这个元素，同时要大于下面其他元素的z-index，但实际上是有了上面的这个就已经让IE7显示这样的结果了。这又是为什么呢？因为虽然.bot .post的是z-index:99,但是.bot没有设置值，这个时候.top中的元素是跟.bot比较的，当然如果里面的元素会与.bot .post争风吃醋那么就必须设置值大于99,如：

<div style=” position:relative;”>
<div class=”top”>…</div>
<div class=”bot”>…</div>
</div>

同时我们还可以继续增加一下。也就是在.top上面再套一个元素，而且设置这个元素为position:relative，我们会发现，如果这个元素没有设置z-index，这个bug依然会出现（当然.bot没有包含在这个元素中的时候）。
那么总结起来就是：

1. 这是IE7及相关浏览器处理的一个”缺陷”，造成这种现象的产生。

2. 需要在异常元素的所有父级如果设置了position:relative，则需要设置z-index(一直到让这个元素产生问题的那个元素不属与那个父级的子元素的时候，比如如果后面我们说的.top上面再套一个元素包含了.bot，那么我们设置了，异常还是不会发生的。)

3. 如果影响了异常元素的元素设置了比较高的z-index值，那么异常元素及其父级的z-index必须大于(不能是等于)这个值。