admin 管理员组

文章数量: 1087677

聊一聊CSS中的层叠上下文和层叠顺序

 先来思考一下这个结果是A还是B?  ^_^

    .box { display: flex; }.box > div { background-color: blue; z-index: 1; height: 300px; width: 300px; }   .box > div { border: 10px  #c00;}    .box > div > img { position: relative; right: -150px; z-index: -1; height: 300px;  }
    <div class="box"><div><img src="images/image_1.jpg" /></div></div>

层叠上下文 (Stacking Context)

什么是层叠上下文呢？

层叠上下文是HTML中的一个三维的概念。像咱们看到的元素都是一个二维平面，有水平的x轴和垂直的y轴，三维的话是会再加一个z轴。z 轴可以理解为是用户与电脑屏幕的这条看不见的垂直线。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。（参考图示）

我们可以抽象的理解为当官

具象的比喻：网页中有很多很多的元素，我们可以看成是真实世界的芸芸众生。真实世界里，我们大多数人是普通老百姓们，还有一部分人是做官的官员。OK，这里的“官员”就可以理解为页面中的层叠上下文元素。

换句话说，页面中的元素有了层叠上下文，就好比我们普通老百姓当了官，一旦当了官，相比普通老百姓而言，离皇帝更近了，对不对，就等同于页面中元素级别更高，离我们用户更近了。

每一个网页都有一个默认的层叠上下文。 这个层叠上下文（类比真实世界）的根源就是<html></html>。层叠上下文可以包含在其他层叠上下文中，每个层叠上下文完全独立于它的兄弟元素，每个层叠上下文是自包含的：当一个元素的内容发生层叠后，该元素就会作为整体将会在父级叠上下文中按顺序进行层叠

层叠水平 (Stacking Level)

可以先从图片中感受一下。。。

Root

  • DIV #1 z-index 5
  • DIV #2 z-index 2
  • DIV #3 z-index 4
    • DIV #4 z-index 6
    • DIV #5 z-index 1
    • DIV #6 z-index 3

层叠水平（可以理解为层叠的等级）决定了同一个层叠上下文中元素在z轴上的显示顺序的概念，层叠上下文元素的层叠水平可以理解为官员的职级，1品2品，县长省长之类。

具象的比喻：我们之前说到，处于层叠上下文中的元素，就像是元素当了官，等级自然比普通元素高。假设一个官员A是个省级领导，他下属有一个秘书a-1，家里有一个保姆a-2。另一个官员B是一个县级领导，他下属有一个秘书b-1，家里有一个保姆b-2。a-1和b-1虽然都是秘书，但是你想一个省级领导的秘书和一个县级领导的秘书之间有可比性么？甚至保姆a-2都要比秘书b-1的等级高得多。谁大谁小，谁高谁低一目了然，所以根本没有比较的意义。只有在A下属的a-1、a-2以及B下属的b-1、b-2中相互比较大小高低才有意义。 

  • 普通元素的层叠等级优先由其所在的层叠上下文决定
  • 层叠等级的比较只有在同一个层叠上下文元素中才有意义
  • 在同一个层叠上下文中，层叠等级描述定义的是该层叠上下文中的元素在Z轴上的上下顺序

注意：诸位千万不要把层叠水平和CSS的z-index属性混为一谈。某些情况下z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平是所有的元素都存在。

层叠顺序 (Stacking Order)

层叠顺序表示元素发生层叠时候有着特定的垂直显示顺序，注意，这里跟上面两个不一样，上面的层叠上下文和层叠水平是概念，而这里的层叠顺序是规则。

背景和边框

形成层叠上下文的元素的背景和边框，它是整个上下文中层叠等级最低的

Z-Index 为负数

设置了 z-index 为负数的子元素以及由它所产生的层叠上下文

块级盒模型

位于正常文档流中的、块级的、非定位的子元素

浮动盒模型

浮动的、非定位的子元素

内联盒模型

位于正常文档流中的、内联的、非定位的子元素

z-index 为 0

设置了 z-index 为 0 的、定位的子元素以及由它所产生的层叠上下文

Z-Index 为正数

设置了 z-index 为正数的、定位的子元素以及由它所产生的层叠上下文，它是整个上下文中层叠等级最高的

展开一个比较容易有争议的 inline-block 和 float 的顺序

    body { border: 0; padding: 0; margin: 0; }  .box1{ margin-top:10px; } .box1 > div{ width:200px; height:200px; line-height:200px; text-align:center; }.float{ float:left; background-color:rgb(138, 212, 216); }.inline-block{ display: inline-block; margin-left:-100px; background-color:rgb(198, 209, 95); }
    <div class="box1 box2"><div class="inline-block">divA inline-block</div><div class="float"> divB float:left</div></div>

产生层叠上下文的条件

  • html
  • position（absolute/relative）且z-index不为auto
  • position： fixed or sticky
  • flex或者grid布局中，child项的z-index不为auto
  • opacity：小于1
  • transform：不为none
  • mix-blend-mode：不为normal
  • filter：不为none
  • perspective：不为none
  • clip-path：不为none
  • mask / mask-image / mask-border：不为none
  • isolation: isolate
  • -webkit-overflow-scrolling: touch
  • will-change
  • contain: strict(layout、paint、size)/content(layout、paint)/layout/paint

总结：

1. 子元素的层叠顺序受限于父元素

2. 兄弟之间遵守：后来居上的原则

本文标签： 聊一聊CSS中的层叠上下文和层叠顺序

版权声明：本文标题：聊一聊CSS中的层叠上下文和层叠顺序 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700370841a417721.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。