IE下zindex的使用

注意在使用z-index的元素要设置position属性，不然不会起作用的。

引用连接：http://www.cnblogs.com/Darren_code/archive/2012/03/05/z-index.html#darren_1

在IE下出现的问题　　

　　当定位元素的 'z-index' 未设置时（默认为 auto），在 IE6 IE7 IE8(Q) 下将会创建一个新的局部层叠上下文。而在其它浏览器下，则严格按照规范，不产生新的局部层叠上下文。

　　这个问题将导致定位元素的层叠关系在不同浏览器出现很大的区别，严重的可导致页面布局混乱、内容覆盖等。

　　受影响的浏览器有IE6 IE7 IE8(Quriks Mode)

<style type="text/css">
  body { margin:0; }
  .p1{ top:20px; height:50px; 150px; background-color:blue;}
  .p2{ top:10px; left:20px; height:30px; 100px; background-color:yellow;}
  .p3{ top:0px; left:50px; height:100px; 50px; background-color:red;}
</style>

<div style="position:relative;" class="p1">1
    <div style="position:absolute; z-index:1;" class="p2">2</div>
</div>
<div style="position:absolute;" class="p3">3</div>