z-index层级的小小学问
在日常开发中，我们经常需要用到z-index这个属性来实现一些浮层层叠的交互，z-index的属性值有auto和nubmer数字2种，数值越大，层级越高，看上去很好理解，很好使用。但实际上，我们在使用中仍会遇到一些让人疑惑的问题。
疑惑：为啥我这个浮层设的z-index比另外一个高，却怎么还是在它的下面啊？
首先，我们还是要明确下几种浏览器是如何对z-index解析的，以及结合浏览器是如何渲染页面的。
- ie浏览器对于没有设置z-index属性的元素，默认是以z-index为0来渲染的，参与z-index的比较；
- ff和chrome对于没有设置z-index属性的元素，默认是以z-index为auto来渲染的，不参与z-index的比较；
- 浏览器渲染页面是顺序渲染元素的，排除定位和float布局，定位和float布局的元素是在顺序渲染后，再浮动的；
- ie下，z-index依赖于同级比较，也就是说，假设A，B是两个同级元素，A有子节点C，B有子节点D，A是B的后面的一个兄弟节点，B中的D通过绝对定位浮到A上，D设z-index为10，A中的C也用了绝对定位。但没设z-index，或者设了比10小的z-index，在ie下结果是C覆盖了D，而chrome和ff则是D盖住了C。
.a{width:200px;height:200px;background:red;position:relative;}
.b{width:200px;height:100px;background:blue;position:relative;}
.c{width:110px;height:100px;background:yellow;position:absolute;top:-100px;left:20px;z-index:1}
.d{width:100px;height:100px;background:green;position:absolute;top:10px;left:10px;z-index:10}
<body>
<div class="b"><div class="d">d</div></div>
<div class="a"><div class="c">c</div></div>
</body>
根本原因就是chrome和ff他们父节点没有设置z-index，不参与层级pk，c和d就按照自身的z-index大小pk，所以d盖住c；而ie下，父节点没有设置z-index，会以z-index：0参与比较，而a和b同级节点z-index都是0（都没有设置z-index属性），层级一样，则按先后顺序覆盖了，即c盖住d；如果给b设置z-index:1，则结果相反。
5. 通过父节点设置position：relative，可以把父元素的z-index属性作用到子节点上，如果层级很深的话可以这样做。
通过了解上面几点，我们应该就清楚了为什么层级有时候“不受控制”。
另外：在在开发浮层组件，如果bubble，panel等的时候，不要插入到使用的容器元素里，而应该往body中插入，这样就能把元素跑到外层，z-index设置的就很容易参与比较了，而不会被“无缘无故”的被覆盖。
个人理解，如果不准确的地方，还望不吝指点！谢谢！
