标签：
z-index的层级问题可以归纳为以下几种，文章中定位指position值设置为absolute、relative和fixed中任一个。
<div>
<div class="a">
...
<div class="aa"></div>
</div>
<div class="b">
<div class="bb"></div>
</div>
<div>
形如a层和b层的关系记为关系1(兄弟关系)
形如aa层和a层的关系记为关系2（这里称祖孙关系）
形如aa层和bb层的关系记为关系3（亲戚关系）
1>>兄弟关系元素比较时。
1、对比的两个元素都有定位时z-index大的元素显示在上方，相同时dom结构中后书写的元素显示在上方
2、对比的两个元素中只有一个有定位时，z-index为正，有定位的元素显示在上方。z-index为负，有定位的元素显示在下方。
3、对比的两个元素都没有定位时，z-index值无效，dom结构中后书写的元素显示在上方。
2>>祖孙关系元素比较时
1、孙元素无定位时，孙元素在上方。
2、孙元素有定位时，z-index为正，孙元素显示在上方。z-index为负，孙元素显示在下方。
3>>亲戚关系元素比较时（记为元素1，记为元素2）
1、向树结构根部寻找，找到两者的共有祖先（记为元素3），然后再向元素3的子元素方向寻找，找到元素3->元素1以及元素3->元素2之间距离元素3最近的有定位且由设置z-index的元素，比较这两个元素的层级，比较方法同兄弟关系元素比较。
例如
<div>
<div class="a" style="position:absolute;z-index:9;">
<div class="aa">
<div class="aaa"></div>
</div>
</div>
<div class="b">
<div class="bb" style="position:relative;z-index:8">
<div class="bbb"></div>
</div>
</div>
<div>
当我们想比较bbb层和aaa层高度时我们应该比较a层和bb层高度。这里a层高度高，所以aaa层位于bbb层上方。
再比如
<div>
<div class="a" style="position:absolute;z-index:9;">
<div class="aa">
<div class="aaa"></div>
</div>
</div>
<div class="b">
<div class="bb" style="position:relative;z-index:8">
<div class="bbb" style="position:flex;z-index:10;"></div>
</div>
</div>
<div>
当我们想比较bbb层和aaa层高度时我们应该比较a层和bb层高度。这里a层高度高，所以aaa层位于bbb层上方。
再比如
<div>
<div class="a" style="position:absolute;z-index:9;">
<div class="aa">
<div class="aaa"></div>
</div>
</div>
<div class="b">
<div class="bb" style="position:relative;">
<div class="bbb" style="position:flex;z-index:10;"></div>
</div>
</div>
<div>
当我们想比较bbb层和aaa层高度时我们应该比较a层和bbb层高度。这里bbb层高度高，所以bbb层位于aaa层上方。
当然ie是个奇葩。在ie6和ie7中当我们设置定位的时候，元素会被隐式设置z-index:0。
于是在ie6和ie7中当我们想比较bbb层和aaa层高度时我们应该比较a层和bb层高度。这里a层高度高，所以aaa层位于bbb层上方。
标签：
原文地址：http://www.cnblogs.com/xcmylrl/p/5414180.html
