z-index的使用及注意事项

一、z-index的层级问题

1、无浮动定位，不设置z-index值

结论：子高于父

HTML

<div id="no-style">
   <div id="div1" class="father-div" style="background:#00ffff;">
        div11111
   <div id="test-position" class="child-position-absolute">
        div11111的子元素
    </div>
  </div>
  <div id="div2" class="father-div" style="background:#fbff00;">
      div22222
  </div>
</div>

CSS

.father-div{
   width:300px;
   height:300px;
   border:2px blue solid;
}
.child-position-absolute{
   width:200px;
   height:200px;
   border:2px red solid;
   background: pink;
}

2、div1设置position:absolute; div1与div2重叠；

结论：后者高于前者

.father-div{
    width:300px;
    height:300px;
    border:2px blue solid;
    position: absolute;
}
.child-position-absolute{
    width:200px;
    height:200px;
    border:2px red solid;
    background: pink;
}

3、直接给div1中的子元素添加z-index:30

结论：

• 比较同级元素div1和div2的z-index值（没有自定义），div2后者居上；
• 效果图同上，依旧是div2盖住了div1(整个元素，包括它的子元素);

.father-div{
    width:300px;
    height:300px;
    border:2px blue solid;
    position: absolute;
}
.child-position-absolute{
    width:200px;
    height:200px;
    border:2px red solid;
    background: pink;
    z-index:30;
}

效果图和上面那种情况一样

4、给div1设置z-index:20; 高于div2

结论：兄元素的z-index值高，则兄元素高于弟元素

.father-div{
   width:300px;
   height:300px;
   border:2px blue solid;
   position: absolute;
}
.child-position-absolute{
   width:200px;
   height:200px;
   border:2px red solid;
   background: pink;
   z-index:30;
}
#div1{
   z-index: 20;
}

5、给div2设置了z-index:25; 大于div1,小于div1的子元素

结论：

• 追溯到同级元素，即兄弟元素的比较，div2比div1的z-index大，所以还是div2盖住div1

.father-div{
    width:300px;
    height:300px;
    border:2px blue solid;
    position: absolute;
}
.child-position-absolute{
    width:200px;
    height:200px;
    border:2px red solid;
    background: pink;
    z-index:30;
}
#div1{
    z-index: 20;
}
#div2{
    z-index: 25;
}

结论

1、默认值：

• z-index在IE下默认为z-index:0;
• 而火狐下则默认为z-index:auto;可以自己开头对全局进行设置，z-index:0;

2、正常情况下（没有设置定位浮动的情况下）

• 兄弟（同级）元素后者居上，父子之间子高于父；

3、对于定位元素

• 非同级关系和非父子元素关系之间的z值大小（在z轴上的值）比较，需要回溯至其为兄弟关系的两个祖先元素上，先比较这两个祖先元素的z-index值，只有当“兄”（前者）的z-index大于“弟”的z-index值，“兄”的各个后代元素，才能盖过“弟”元素及其后代元素。

4、对于不同浏览器

• （1）元素的z-index默认为0的情况：如果不另外设置“兄”，“弟”元素的z-index值，那么“兄”的z-index就无法大于“弟”的z-index。那么“兄”元素及其子孙就无法盖过“弟”元素及其子孙。
• （2）而对于FF：元素的z-index的默认值为auto，auto自动，表示“随便，不管我的事”；那么子孙的z值等级就只跟他们本身的z-index的值有关。

二、z-index的失效问题

1. 父标签position: relative；
2. 问题标签无position属性（position: static 也不行）；
3. 问题标签含有浮动(float)属性。

解决办法有三：

1. 父标签position:relative改为position:absolute；
2. 浮动元素添加position属性（如relative，absolute等）；
3. 去除浮动。

总结

z-index只适用于已定位的元素：

• 即拥有relative、absolute或者fixed的元素。
• 所以z-index是一种依赖属性，依赖position属性。

参考博客

https://blog.csdn.net/xinzaitt/article/details/84948015

https://blog.csdn.net/WDCCSDN/article/details/80967265?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs

https://blog.csdn.net/SmileRM/article/details/78812624?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs