CSS&HTML面经专题——（六）z-index与CSS层叠继承

CC爱学习
656 阅读5分钟

一、请说明z-index的工作原理，适用范围？

z-index的原理就是建立不同的文档流，不同层级

这个问题其实主要问的是文档流，那么就问题来了？

Q&A: 脱离文档流有几种方式？

  • 浮动
  • 定位
  • transform变形（和脱离文档流差不多的）
  • animation帧动画

1、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属性。

三、层叠规则以及CSS为什么叫CSS(层叠样式表)

1、继承规则

DOM树中某个节点样式改变时，它的所有子孙节点都会改变。图中body节点的子节点继承了body的样式规则（16px的字号）。

2、层叠规则

css又叫层叠样式表，顾名思义就是一层层叠起来的，虽然在页面中呈现的效果的二维的，但实际是三维的。元素的层叠顺序是基于 z 轴的，**并且永远不会有两个在 z 轴上重合的元素。**判断元素在 z 轴上的堆叠顺序，不仅仅是直接比较两个元素的 z-index 值的大小，这个堆叠顺序实际由元素的层叠上下文、层叠等级共同决定。

层叠上下文有点类似于BFC，完全独立于兄弟元素，当处理层叠时只考虑子元素。

形成层叠上下文的有：

  • 根元素
  • position 值为 absolute 或 relative，且 z-index值不为 auto
  • position 值为 fixed 或 sticky
  • z-index 值不为 auto(0) 的 flex 元素，即父元素 display: flex 或 inline-flex
  • opacity 属性值小于 1 的元素
  • transform 属性值不为 none的元素 ……

层叠等级决定了同一个层叠上下文中元素在 z 轴上的显示顺序

  • 普通元素的层叠等级优先由其所在的层叠上下文决定
  • 层叠等级的比较只有在同一个层叠上下文元素中才有意义
  • 在同一个层叠上下文中，层叠等级描述定义的是该层叠上下文中的元素在 Z 轴上的上下顺序
  • 层叠等级并不一定由 z-index 决定，只有定位元素的层叠等级才由 z-index 决定，其他类型元素的层叠等级由层叠顺序、他们在 HTML 中出现的顺序、他们的父级以上元素的层叠等级一同决定。

层叠顺序：谁大谁上，后来居上。

img

avatar
文章
阅读
粉丝