关于前端:用了那么久的-CSS-但你还是不懂它

欢送关注同名公众号《熊的猫》，公众号会定期分分享干货，也可退出前端交换群！

原本没有建群的打算，因为看到蛮多的群归于平静，然而局部同学想进入进阶群一起学习，既然有需要就整起，能够加 WX：Mr10212021，回复 加群 即可，原先加过的默认进群！

【前段时间有人问】：为什么我设置的 z-index 值不失效呢？

【我说】：那可能是你真的不晓得 CSS 层叠上下文。

然而话说回来，都用了那么久 CSS 了，这都不晓得是不是有些说不过去呀，这也是本文产生的次要起因，心愿对你有所帮忙！

本文就以 CSS 层叠上下文 和 图层 Layers 为主，来探讨一下那些不被你器重的 CSS 基本知识。

你可能奇怪那什么会波及到 图层 呢？

因为怕你可能会 搞混、分不清 呗，带来的结果就是你在做语言表达时就会相互混用概念！

先不焦急讲概念，来看看平时你最容易犯错的栗子！

这里简略介绍一下 float，因为我置信很多人并不是那么分明它的规定（即便很简略），咱们都晓得 float 浮动元素 能够笼罩 block 块元素，例如：

<body>
    <div class="float-box">float box</div> // float: left
    <div class="div-box">div box</div>
</body>

那么调换一下这两个元素的程序又如何，如下：

<body>
    <div class="div-box">div box</div>
    <div class="float-box">float box</div> // float: left
</body>

【扩大】这 浮动元素 怎么就不笼罩 块元素 了？

很简略了，这是因为 浮动元素 是有 定位规定 的：

当一个元素产生浮动后，它会被移出 失常文档流 ，要么向左或向右平移
始终平移直到碰到了所处的 容器边框 ，或碰到 另外一个浮动元素 为止

下面的体现后果很显著了，float 元素 能够笼罩 block 元素，那么换成 inline 行内元素 又如何，间接借助 第一个示例的图片，其中的文本就能够当做 inline 元素：

不难发现，其中的文本没有被 浮动元素 笼罩（实际上把文字局部换成 <img> 也是一样的），按情理要文本的父元素都被笼罩了，文本不应该不被笼罩，这时候有人可能就会进去答复了：float 元素容许 文本 和 内联元素 盘绕它。

说得对（你的学秘籍是这样通知你的），然而这里实际上是波及到了 CSS 层叠上下文。

咱们最常见页面布局其实就是沿着 x 轴 和 y 轴 排列的，换句话说就是 从左到右 （行内元素、行内块元素）、 从上到下 （块元素）的形式排列，然而在某些场合下 元素和元素之间是须要产生重叠 的，例如： 定位元素、margin 等属性设定了负值时。

既然元素存在可能重叠的状况，那么就须要为其制订规定，否则 不同浏览器 怎么晓得该如何重叠呢？

因而，就须要 CSS 层叠上下文 的概念，同时因为是波及到层叠程序，那就不再是简略的依照 x 轴 和 y 轴 方向排列，而是引入了虚构的 z 轴，优先级越高的元素渲染时在 z 轴 上就会处于 更高层，离用户视角更近。

假设用户侧面向（浏览器）视窗或网页，而 HTML 元素沿着其绝对于用户的一条虚构的 z 轴 排开， 层叠上下文 就是对这些 HTML 元素的一个 三维构想 ，多个 HTML 元素基于其 元素属性 依照 优先级程序 占据这个空间。

以上是官网说法， 大白话 如下：

顾名思义，层叠上下文 中层叠这两个字应该不难理解吧，那么既然是层叠的，天然就须要分 先后顺序 ，而这个 优先级 是依据某些 CSS 属性 来制订的，而所谓的 上下文 就是这个规定作用的内容区。

文档中的层叠上下文由 满足以下任意一个条件 的元素造成：

文档根元素（<html>）
position 值为 absolute（相对定位）或 relative（绝对定位），且 z-index 值不为 auto 的元素
position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素
flex 容器的 子元素，且 z-index 值不为 auto
grid 容器的 子元素，且 z-index 值不为 auto
opacity 属性值小于 1 的元素
transform 属性不为 none 的元素
will-change 值设定任一 CSS 属性 的元素

以上只是列举了局部常见的，更多可见 MDN 层叠上下文

值得注意的是：

层叠上下文可蕴含在其余层叠上下文中，并独特创立一个层叠上下文层级
- 【大白话】：一个 父层叠上下文 中能够蕴含多个 子层叠上下文 ，且它们都所属于 父层叠上下文 ，而不是生成和 父层叠上下文 同级的 新层叠上下文
每个层叠上下文都 齐全独立 于它的兄弟元素
- 当解决层叠时只思考子元素
- 【大白话】：对外部而言，父叠上下文 不管蕴含了多少 子层叠上下文 都会作为 整体 按优先级渲染；对外部而言， 父叠上下文 中的多个 子层叠上下文 还是会按优先级渲染
每个层叠上下文都是 自蕴含 的
- 当一个元素的内容产生层叠后，该元素将被 作为整体 在父级层叠上下文中按程序进行层叠
- 【大白话】：一个元素变成 层叠元素 后， 其与其子元素 就会与其余 兄弟层叠元素 按优先级进行渲染

具体、最新的规定在 W3 文档 —— Elaborate description of Stacking Contexts 中有残缺阐明，尽管形容的很具体，然而估摸着会吓退一部分人，这里简略总结一下。

层叠上下文 中 子元素 的 绘制程序 规定如下，每个元素的渲染根本遵循 背景色 — 背景图（如果有）— 边框（如果有） 的程序：

元素为 根元素（HTML）
- 背景色
- 背景图
元素为 z-index < 0 的定位元素（position）
元素为 （非定位）块元素（block）
- 非 table 元素
  - 背景色
  - 背景图
  - 边框
- table 元素
  - <table> 背景色
  - <table> 背景图
  - <table> 列背景色、背景图
  - <table> 行背景色、背景图
  - <table> 单元格 背景色、背景图
  - <table> 边框
元素为 （非定位）浮动元素（float）
元素为 （非定位）内联（块）元素（inline/inline-block）
元素为 z-index = 0 | auto 的定位元素（position）
元素为 z-index >= 1 的定位元素（position）

其实也就是对应上面这张大家最常见的 CSS 层叠上下文的 7 层简化图 ，没有一开始就贴出来是因为图中的形容过于简洁了，你必须要对本来的规定比拟相熟能力套用起来，不然后果就是 你认为的真的只是你认为的：

要比拟两个元素的层叠程序，咱们先要确定它们 所在的层叠上下文 的层叠程序：

若两个元素处于 同一个层叠上下文 中，那么就按同一层叠上下文中的渲染程序来计算
若两个元素处于 不同层叠上下文 中，那么它们 所在的层叠上下文的程序 就决定了指标元素的层叠程序
- 假如 A 层叠上下文 的层级高于 B 层叠上下文，那么 A 中的子元素 都会高于 B 中的子元素，此时对 B 中的子元素 设置多大的 z-index 都没有用，因为 z-index 只能管制 同一层叠上下文 中元素的 重叠程序
- 假如 A 层叠上下文 和 B 层叠上下文 层级雷同，那么 前面的层叠上下文 就会笼罩 后面的层叠上下文

【扩大】规定 + 个性 = 后果

列举出下面的 7 层简化图 后，有局部同学可能会存有疑难，那就是下图中的 div box 文本 按情理应该会笼罩到 float box 元素 上才对呀，但这也不是笼罩啊！

因为 规定（层叠上下文规定）+ 个性（元素个性）= 后果（视图），尽管 CSS 层叠上下文 的规定是 float < inline（即文本应该笼罩浮动元素），然而别忘了 浮动元素的个性：

所以文本不会真的 “ 笼罩 ” 在 浮动元素 上，而是 盘绕在其四周，只不过本文着重讲的是 CSS 层叠上下文 而已。

失常状况下，浮动元素 和 块级元素 之间的体现如下：

那么当初咱们也能够通过层叠上下文来 解释笼罩景象：

在 同一个层叠上下文 中渲染的 优先级 为 float 元素 > block 元素，因而在渲染时就须要保障 float 元素 在三维的 Z 轴 上要离用户更近

那么如何利用 层叠上下文 让 float 元素 不笼罩 block 元素 呢？

那就是让 block 元素 产生一个新的层叠上下文呗，例如将它的 opacity 属性值设置成任意 小于 1 的值即可，以下是设置了 opacity: 0.9; 的成果：

如果你还没想到，那么能够请本人喝一杯 QQ ㄋㄟㄋㄟ好喝到咩噗茶！

在你的印象中 定位元素 是不是肯定会笼罩其余 非定位元素 呀，来看看是不是：

<style>
 .abs-box{
    background-color: red;
    position: absolute;
  }
  .div-box {background-color: rgb(16, 4, 181);
  }
</style>
  
<body>
  <div class="box abs-box">absolute box</div>
  <div class="box div-box">div box</div>
</body>

如同没问题的喔 ~ ~ ~

同上一个示例，咱们给 .div-box 元素设置一个 opacity: 0.9; 再看看：

没问题，按之前的了解此时 .div-box 元素产生了 新的层叠上下文 ，所以天然就笼罩了 .abs-box 元素，如果你之前看得足够认真，那么你肯定会发现此时 .abs-box 元素并没有产生 层叠上下文，如果有疑难能够回头再看看。

此时咱们因为没有为其设置 z-index 属性，即默认就为 z-index:auto; 不满足生成条件，那么咱们能够设置 z-index: 0 让其满足生成 层叠上下文 的条件，不过即便这样设置了也和上图是一样的。

首先 z-index 只针对 position 定位元素 无效，其规定了元素在 z 轴 的地位，每个层都有一个程序数， 程序数大的层在下面，小的在上面 ，其默认就是在 第 0 层 渲染。

于是乎，为了解决下面的 position 元素 被笼罩的问题，咱们就能够为其设置 z-index: 1 即可：

后面曾经讲了为什么要谈到图层，因为很多人会误以为 CSS 层叠上下文 这种元素渲染互相笼罩的景象间接给归类为不同的图层，但实际上这两者齐全是不一样的，当然这里也不会去讲什么底层原理，尽量简洁。

这里的 图层 Layer 实际上就是，浏览器 解析、渲染 视图过程中的一个环节（老八股）：

构建 DOM Tree
构建 CSSOM
构建 Render Tree
构建 Layout Tree
构建 Layer Tree（划分图层）
依据视口大小对图层进行分块
栅格化 raster
合成和显示

划分图层的目标就是为了实现通过 GPU 计算来减速渲染 实现 硬件加速。

图形渲染的 必要条件 包含 简单的数学 和 几何计算，而 GPU 就是专门为了这些简单计算而被设计的，通过划分不同的图层，计算它们变动的频率，再决定交由 CPU 渲染 还是 GPU 渲染 来实现优化。

这里不卖关子了，间接列举一些常见的条件，如下：

产生 滚动条 的元素
- 滚动条 独自生成图层
- 产生 滚动的内容 独自生成图层
HTML 根元素
video 元素
canvas 元素
领有 CSS3 动画 的元素
position：fixed 的定位元素
领有 CSS 与 3D 变换 相干属性的元素
领有 CSS will-change 属性的元素
……

那当然是用浏览器的 Devtools 去察看了，而 Devtools 又分为 Safari Devtools 和 Chrome Devtools，而对于其中的具体比拟可见 神光大佬 的 什么 css 会新建图层？别猜了，Devtools 都写了。

欢送关注同名公众号《熊的猫》，公众号会定期分分享干货，也可退出前端交换群！

小小的总结一下：

一个元素产生层叠上下文，那么它会比其余元素领有高优先级
一个层叠上下文中元素的排列程序：
- 层叠上下文的 背景色、背景图（如果有）、边框（如果有）
- 定位元素，且 z-index < 0
- （非定位）块元素
- （非定位）浮动元素
- （非定位）行内（块）元素
- 定位元素，且 z-index = auto | 0
- 定位元素，且 z-index > 0
比拟两个元素的层叠程序，先确定它们 所处的层叠上下文 的层叠程序
- 处于 雷同层叠上下文，则按如上程序计算
- 处于 不同层叠上下文，则比拟它们各自层叠上下文的程序
层叠上下文 和图层不是同一个货色，即便从视图体现来看是类似的，但实质不同

好了，以上就是本文的全部内容，心愿你不要在混同这两个概念而傻傻分不清楚了，也心愿可能让你修炼到 真秘籍 ，而不是那些被生吞活剥的 假秘籍。

心愿本文对你有所帮忙！！！

关于前端:用了那么久的-CSS-但你还是不懂它

前言

CSS 层 / 堆叠上下文

先看示例（修炼假秘籍）

float 元素

float 元素和 inline 元素

为什么须要 CSS 层叠上下文？

什么是 CSS 层叠上下文？

如何生成 CSS 层叠上下文？

CSS 层叠上下文中的渲染程序（优先级）

如何确定两个元素的层叠程序？

再看示例（修炼真秘籍）

示例一：利用 CSS 层叠上下文不让浮动元素笼罩块元素

示例二：z-index 申请出战

图层 Layer

什么是图层？

什么样的元素会创立新图层？

怎么察看图层？

Safari Devtools

Chrome Devtools

最初

前言

CSS 层 / 堆 叠上下文