前端必须掌握的「CSS层叠上下文」讲解 | 纯手工示例，包教包会

时间 2020-05-30

标签前端必须掌握 css 层叠上下文讲解手工示例包教栏目 CSS 繁體版

原文原文链接

大家都不看的总集篇：从零开始的大前端筑基之旅(深刻浅出，持续更新～)
以为不错就顺手点个赞吧css

本文中全部示例均为 `html` 渲染构成，因此能够直接选中示例在控制台调试，推荐本身动手试试文章中列举的小提示，有助于加深理解。有任何问题欢迎在评论中指出。 html

嗯。。。chrome --> 鼠标移动到示例上 --> 右击 --> 检查前端

大部分人在初步学完css后，对z-index的印象大概处于“z-index就是用来描述定义一个元素在屏幕Z轴上的堆叠顺序”。例如，若是A元素和B元素重叠了，这么说有点枯燥，换个说法，css3

若是漂亮妹子A和文字B注释重叠了
可是页面渲染的时候，文字处于图片之上，挡住你看妹子了
这时候，你可能会
- 设置妹子的z-index为999
- 设置文字的z-index为-1

就是这么差异对待。既然拿上面那一段举栗子，那就表明这种理解有问题，至少是不严谨的。web

z-index属性仅在定位元素（定义了position属性，且属性值为非static值的元素）上有效果。chrome
元素在Z轴上的堆叠顺序，由元素所属的层叠上下文、元素的层叠水平、以及元素在文档中的顺序等共同决定，元素的z-index值的只是决定元素的层叠水平的条件之一。浏览器

这两条必定要记牢，下面会用到。markdown

什么是“层叠上下文”

层叠上下文(stacking context)，是HTML中一个三维的概念。它划分了某种领域或范围，在渲染规则层面，将内部与外部隔开，并赋予元素自身及内部区域某些特性。编辑器

在CSS2.1规范中，每一个盒模型的位置是三维的，即元素除了在页面上沿X轴Y轴平铺，同时还拥有一个相对屏幕垂直的纵深，也就是表示层叠的Z轴。wordpress

对于元素所展示的内容，通常状况下，元素在文档中顺序排列，互相排斥，咱们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，就会发现某个元素覆盖了另外一个元素或者被另外一个元素覆盖。

对于元素的层级结构来讲，父元素与其子元素大部分状况下都是重叠的，只是通常状况下，父元素没有设置边框和背景，或者由于子元素没有突破父元素的宽高，咱们通常也不会意识到元素的堆叠状况。

元素因为特定的css设置，拥有了层叠上下文后，就会变成层叠上下文元素；

层叠上下文元素有以下特性：

层叠上下文的层叠水平要比普通元素高；
层叠上下文能够嵌套，内部层叠上下文及其全部子元素均受制于外部的层叠上下文。
每一个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
每一个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只须要考虑后代元素。
层叠上下文能够阻断元素的混合模式；

如何建立“层叠上下文”

层叠上下文大部分由一些特定的CSS属性建立。

HTML中的根元素<html></html>自己就具备层叠上下文，称为“根层叠上下文”。
普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
css3补充了一些建立层叠上下文的条件，后面会列举。

层叠水平

层叠水平(stacking level)，决定了同一个层叠上下文中元素在z轴上的显示顺序。

全部的元素都有层叠水平，包括层叠上下文元素。每一个层叠上下文和兄弟元素独立，所以层叠水平的比较只有在当前层叠上下文元素中才有意义。

归属于不一样层叠上下文的元素，首先要追溯其祖先元素的层叠上下文，直到各自的祖先层叠上下文元素归属于同一个层叠上下文，而后判断这两个祖先元素的层叠水平。

层叠顺序

层叠顺序(stacking order)，表示元素发生层叠时的特定的垂直显示顺序，是一种用于肯定元素层叠水平的规则。

当元素重叠时，必须决定哪部份内容展现在屏幕上，所以，层叠顺序决定了一条优先级规则，也能够称为等级链规则。如下排名分前后，自上而下优先级愈来愈低：

z-index > 0 (要求z-index属性生效)
z-index: auto 或者 z-index: 0 (z-index: auto 不会建立层叠上下文)
inline、inline-block 行内盒子
float浮动盒子
block块级盒子，非 inline-block，无 position 定位（static除外）的子元素
z-index < 0
层叠上下文元素的 background/border

当元素发生层叠的时候，其覆盖关系一般遵循下面2个准则：

在同一个层叠上下文领域，当具备明显的层叠水平标示的时候，若有效的 z-index 值，层叠水平值大的那一个覆盖小的那一个。
当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

深刻浅出

概念讲解完了，下面进入实战环节，来，看我手上，如今咱们有两只猫：

验证准则2，

当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

而后让它们重叠起来：

<div class="container">
  <div class="black">
    <img src="black.jpg"></img>  
  </div>
<div class="white">
    <img src="white.jpg"></img>  
  </div>
</div>
复制代码

.container{
  width: 300px;
  height: 200px;
  border: 1px solid grey;
}

.black{
  position: absolute;
}

.white{
  position: absolute;
  top: 50px;
  left: 50px;
}
复制代码

当前 black.img 和 white.img 都是普通元素，其父元素也是普通元素，所以二者处于元素的“根层叠上下文”中。而且层叠水平一致，所以遵循后来居上原则，白猫覆盖黑猫。

验证准则1

在同一个层叠上下文领域，当具备明显的层叠水平标示的时候，若有效的 z-index 值，层叠水平值大的那一个覆盖小的那一个。

给黑猫black.img增长 z-index 属性并设置 position 使其生效

.black img{
  position: relative;
  z-index: 1;
}
复制代码

当前 black.img 是层叠上下文元素(不影响比较层叠水平)， white.img 是普通元素，其父元素都是普通元素，所以二者处于元素的“根层叠上下文”中。black.img 具备明显的层叠水平标示 z-index: 1。所以黑猫覆盖了白猫。

验证特性二、3

层叠上下文能够嵌套，内部层叠上下文及其全部子元素均受制于外部的层叠上下文。

每一个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

归属于不一样层叠上下文的元素，首先要追溯其祖先层叠上下文元素，直到各自的祖先层叠上下文元素归属于同一个层叠上下文，而后判断这两个祖先元素的层叠水平。

接上面代码，首先给白猫white.img增长 z-index 属性并设置 position 使其生效，当前css代码以下：

.container{
  width: 300px;
  height: 200px;
  border: 1px solid grey;
}

.black{
  position: absolute;
}
.black img{
  position: relative;
  z-index: 1;
}

.white{
  position: absolute;
  top: 50px;
  left: 50px;
}

.white img{
  position: relative;
   z-index: 2;
}
复制代码

此时，black.img 和 white.img 都是层叠上下文元素(不影响层叠水平对比)，其父元素都是普通元素，二者处于元素的“根层叠上下文”中。black.img 和white.img都具备明显的层叠水平标示 z-index，白猫的 z-index 值大于黑猫，因而从新覆盖在黑猫上面。

给black 和 white补充z-index 属性，使black 和 white产生层叠上下文

.black{
  position: absolute;
  z-index: 2;
}
.white{
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}
复制代码

虽然白猫的 z-index 值大于黑猫，但因为各自的父元素均为层叠上下文元素，所以白猫和黑猫归属于不一样的上下文元素，没法直接比较，须要追溯各自父元素。

black 和 white处于元素的“根层叠上下文”中，black 的z-index 大于 white，所以black的后代元素black.img覆盖在white的后代元素white.img上，即黑猫覆盖白猫。

验证特性1

层叠上下文的层叠水平要比普通元素高；

为了使两张图片重叠，设置black的宽高为0。

若是继续使用position: absolute来使图片重叠，就无法验证本条，由于依据层叠顺序， z-index: 0 或 z-index: auto 自己就比inline或block优先级高，体现不出层叠上下文元素比普通元素层叠水平高

html代码不变，css以下

.black{
  width :0;
  height :0;
}
// markdown 编辑器可能会补充一些属性，致使黑猫没法显示，所以咱们补充下面属性
.black img{
  width: 232px;
  height: 153px;
  max-width: inherit; 
}
复制代码

上面的示例中，白猫和黑猫都是普通元素，处于元素的“根层叠上下文”中，其中白猫在DOM流中处于后面，所以白猫在黑猫的上面。

下面咱们使用css3中补充的建立上下文的条件来使black元素产生层叠上下文。

元素的opacity属性值不是1；

.black{
  width :0;
  height :0;
  opacity: 0.9;
}
复制代码

如今， black 元素是层叠上下文元素，其后代black.img的层叠水平大于普通元素，因此黑猫覆盖了白猫。若是你仔细看，仍是能够看到黑色背景后面的白猫的。

验证层叠顺序：z-index: auto > inline/inline-block

上个示例提到， z-index: 0 或 z-index: auto 自己就比inline或block优先级高，咱们来验证一下。总体css属性以下。

.black img{
  position: absolute;
}
复制代码

仅设置black.img为position: absolute;。不显式设置 z-index 数值时，浏览器会默认z-index: auto。

当前 black.img 和 white.img 都是普通元素(z-index: auto 不会建立层叠上下文)，其父元素也是普通元素，所以二者处于元素的“根层叠上下文”中。元素无明显的层叠水平标示 z-index，依据层叠顺序，z-index: auto > inline/inline-block，黑猫在上面。

若是对白猫 white.img 追加position: absolute; 属性，black.img 和 white.img 就处于同一层叠水平，依据后来居上原则，白猫在上面。选中本示例在控制台中调试一下吧

验证层叠顺序：`z-index < 0` > 层叠上下文元素的 `background/border`

在此以前，咱们先验证另外一个规则：block块级盒子 > z-index < 0 如今，你只有黑猫了。

<div class="container">
  <div class="black">
    <img src="black.jpg"></img>  
  </div>
</div>
复制代码

给black设置背景色橙色， black.img 设置z-index: -1

.black{
  background: orange;
}
.black img{
  position: relative;
  z-index: -1;
}
复制代码

整个black元素都显示橙色，证实了块级元素的层叠水平比z-index: -1 高。而后给black元素追加opacity: 0.9，使black产生层叠上下文。

.black{
  background: orange;
  opacity: 0.9;
}
.black img{
  position: relative;
  z-index: -1;
}
复制代码

此时，图片出如今橙色背景之上，验证了z-index < 0 > 层叠上下文元素的 background/border。

css3产生层叠上下文的规则

在CSS3中，元素属性知足如下条件之一，也会产生层叠上下文。

父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素(此时z-index会生效，不须要设置position)；
元素的opacity属性值不是1；
元素的transform属性值不是none；
元素mix-blend-mode属性值不是normal；
元素的filter属性值不是none；
元素的isolation属性值是isolate；
will-change指定的属性值为上面任意一个；
元素的-webkit-overflow-scrolling属性值设置为touch`。

4-8条可自行百度或点击参考文档1

验证css3规则1

父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素(此时z-index会生效，不须要设置position)；

<div class="container">
  <div class="black">
    <img src="black.jpg"></img>  
  </div>
</div>
复制代码

给black设置背景色橙色， black.img 设置z-index: -1 。

.black{
  background: orange;
}
.black img{
  position: relative;
  z-index: -1;
}
复制代码

使用规则1，补充css属性以下：

.container{
  width: 300px;
  height: 200px;
  border: 1px solid grey;
  display: flex;
}
.black{
  background: orange;
  z-index:2; 
}
复制代码

此时，图片出如今橙色背景之上，依据层叠顺序z-index < 0 > 层叠上下文元素的 background/border，反向推出此时black为层叠上下文元素。

白猫还你

如今，把白猫还给你，使用下面的示例在控制台验证一下各项规则和你的想法吧

嗯。。。chrome --> 鼠标移动到示例上 --> 右击 --> 检查

若是你收获了新知识，或者收获了左侧精美图片，请点个赞吧～

-

总集篇：从零开始的大前端筑基之旅(深刻浅出，持续更新～)

推荐阅读：

聊聊css position属性及其sticky属性值的特性(吸顶特效)

回流(reflow)与重绘(repaint)，KFC与MC

viewport和1px | 工具人: 这是1px，设计师：不，这不是

可食用的「css布局干货」,纯Html示例，可调试 | 水平、垂直、多列

Sass.vs.Less | 简介与比较

参考文章：

深刻理解CSS中的层叠上下文和层叠顺序