ie的z-index问题
在写前端html页面的时候，有些层我们想着让它不论本身在dom结构的什么位置，但是都显示在屏幕的最前方，而不要被后面的元素遮盖，比如弹出的二级菜单、展开的地址选择列表、展开的礼券列表（一般都是xx列表）。
我们都知道要用z-index，让指定的元素的位置更高，从而不被覆盖，大多数浏览器下也恰如我们预想的那样，指定的元素跑到了上层，盖住了其他元素。但是在ie系列就不是这样了，ie6,ie7,ie10,ie11,360的ie兼容模式，都会这样。
ie8不这样，据说是在ie8下处理了这个bug，但是在后续的版本中居然又放出来了。
关于这个z-index的产生原因和处理方法，在Darren_聂微东 - 关注前端技术这篇IE下 z-index 的各种坑 解释和说明的特别清晰、了然，仔细看一遍，就能理解。
这里我将结合实际遇到的情况，进行进一步的说明，因为这里遇到的问题，单单是在父级增加定位属性和z-index值是不可以的，因为页面中存在多组这样的元素的时候，后续的父级元素会穿透前边的弹出列表，从而造成覆盖层级不对的问题。
看下这张图的效果，大家就明白了：
处理方法（一）
出上述问题时，html的结构大概是这样的:
<div style='position: relative;z-index:99;'><div>优惠券</div><div>礼券列表(ul li)</div>
</div>也就是按照常规的处理方式，给父元素增加z-index属性。但是截图中大家也看到了，后续的“优惠券”的小方框跑到了优惠券列表的上边来了，这样效果一定说不过去的。
那么，这时候怎么处理呢？我们的方法是吧礼券列表和优惠券分开，把礼券列表往外放一层，大概类似于这样：
<div ><div>优惠券</div>
</div>
<div style='position: relative;z-index:99;'>礼券列表(ul li)
</div>那么，这样截图中的问题就没有了，变成了这样：
是不是发现，间距特别大？因为absolute元素的位置属性是相对于其父元素中最近的一个relative元素的。第一种方式relative元素在“优惠券”按钮外的div，第二种方式relative元素在“优惠券”按钮下边的div。
所以这里按照需要，再调整一下top值就可以了。这种方式的关键是，将优惠券列表的div外移到足够外层，从而不被后续元素遮盖。
如果最外层没有定位元素会怎么样
这里使用开头说道那篇文章中的例子，例子的原始代码是这样的：
<html>
<head>
<style>.parent{width:200px; height:200px; padding:10px;}.sub{text-align:right; font:15px Verdana;width:100px; height:100px;}.lt50{left:50px;top:50px;}
</style>
</head>
<body>
<div style="position:absolute; background:lightgrey;" class="parent"><div style="position:absolute;z-index:20;background:darkgray;" class="sub">20</div><div style="position:absolute;z-index:10;background:dimgray;" class="sub lt50">10</div>
</div>
<div style="position:absolute;left:80px;top:80px;background:black;" class="parent"><div style="position:absolute;z-index:2;background:darkgray;" class="sub">2</div><div style="position:absolute;z-index:1;background:dimgray;" class="sub lt50">1</div>
</div>
</body>
</html>效果是这样的：
如果20和10所在的div的父元素嵌套链里面没有定位元素会怎么样呢？
<div style="position:absolute; background:lightgrey;" class="parent">我们去掉第一个div中的position:absolute; ，变成这样：
<div style=" background:lightgrey;" class="parent">那么效果怎么样呢？
是不是得到了我们想要的效果！！
处理方法（二）
上边说道的也就是第二种方法了，也就是让想展示在最高层的元素的父元素嵌套链中不要出现定位元素，京东的购物车页面礼券列表使用的就是这种方式。
需要注意的是，这时候元素的定位位置是相对于页面左上角点的，js需要根据用户点击位置获取到对应的“优惠券”位置，来定位优惠券列表的位置。
总体来说，控制复杂度上，第一种方式是要好一点的。
