用了那么久的 CSS ，但你还是不懂它

javascript/html教程 2 年前 0 32

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

我说：那可能是你真的不知道 CSS 层叠上下文。

但是话说回来，都用了那么久 CSS 了，这都不知道是不是有些说不过去呀，这也是本文产生的主要原因，希望对你有所帮助！

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

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

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

CSS 层/堆叠上下文

先看示例（修炼假秘籍）

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

float 元素

这里简单介绍一下 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 元素和 inline 元素

上面的表现结果很明显了，float 元素可以覆盖 block 元素，那么换成 inline 行内元素又如何，直接借助第一个示例的图片，其中的文本就可以当做 inline 元素：

不难发现，其中的文本没有被浮动元素覆盖（实际上把文字部分换成 <img> 也是一样的），按道理要文本的父元素都被覆盖了，文本不应该不被覆盖，这时候有人可能就会出来回答了：float 元素允许文本和内联元素环绕它。

说得对（你的学秘籍是这样告诉你的），但是这里实际上是涉及到了 CSS 层叠上下文。

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

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

既然元素存在可能重叠的情况，那么就需要为其制定规则，否则不同浏览器怎么知道该如何重叠呢？

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

什么是 CSS 层叠上下文？

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

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

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

如何生成 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 层叠上下文

值得注意的是：

层叠上下文可包含在其他层叠上下文中，并共同创建一个层叠上下文层级

【大白话】：一个父层叠上下文中可以包含多个子层叠上下文，且它们都所属于父层叠上下文，而不是生成和父层叠上下文同级的新层叠上下文

每个层叠上下文都完全独立于它的兄弟元素

当处理层叠时只考虑子元素
【大白话】：对外部而言，父叠上下文不论包含了多少子层叠上下文都会作为整体按优先级渲染；对内部而言，父叠上下文中的多个子层叠上下文还是会按优先级渲染

每个层叠上下文都是自包含的

当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠
【大白话】：一个元素变成层叠元素后，其与其子元素就会与其他兄弟层叠元素按优先级进行渲染

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

详细、最新的规则在 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 层叠上下文而已。

再看示例（修炼真秘籍）

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

正常情况下，浮动元素和块级元素之间的表现如下：

那么现在我们也可以通过层叠上下文来解释覆盖现象：

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

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

那就是让 block 元素产生一个新的层叠上下文呗，例如将它的 opacity 属性值

设置成任意小于 1 的值即可，以下是设置了 opacity: 0.9; 的效果：

如果你还没想到，那么可以请自己喝一杯 QQㄋㄟㄋㄟ好喝到咩噗茶！

示例二：z-index 申请出战

在你的印象中定位元素是不是一定会覆盖其他非定位元素呀，来看看是不是：

<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>