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层上方。