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

posted @ 2016-04-21 19:07  星辰梦忆  阅读(281)  评论(0编辑  收藏  举报