z-index问题
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层上方。