CSS z-index 示例

我的粉丝都知道我不再从事前端开发工作，但我之前做了近15年的前端开发，而且我是自学的。我很幸运拥有建筑、CAD、平面设计和3D设计方面的背景，所以掌握布局中那些更偏数学（或者在这个例子中是几何）的知识对我来说并不难。然而，我发现对于那些完全没有相关背景的自学开发者来说，这确实z-index是一个很难掌握的技能。

这是我尝试用图解方式解释它的方法。

大多数人都熟悉笛卡尔坐标系的概念。它用于定义一个点在二维平面（线段）或三维空间（空间）中的位置。如果您开车并使用谷歌地图，您可能熟悉地理空间坐标，即经度和纬度；这些点是我们用来表示地图或地球上位置的坐标。

二维或二维

在 中2d，我们有y-axis、 和x-axis。根据它们的收敛性，即点 (0,0)，我们可以确定另一个点的位置。通常，y-axis定义点的垂直位置， 定义x-axis点的水平位置。

如果有几个点定义了一个形状，比如一个盒子，那么我们可以使用坐标来定义它的尺寸和位置。

这就是我们使用 CSS 进行布局的基本方式，即根据视口边缘定义的两条假想线来定义元素的尺寸和位置。

我们理解y=0为浏览器视口的顶部，以及x=0（从左到右）左边缘，因此 (0,0) 是我们加载页面时的最左上角点（假设它没有通过编程方式滚动到另一个x,y位置）。

布局和盒式模型

当我们在页面标记中添加新元素时，默认情况下它们会被添加到默认上下文中（我将在本文后面解释上下文的概念）。它们会遵循文档流，并按照添加到文档中的顺序彼此堆叠。

因此，如果我们有 3 个块元素（divs例如，如下图所示）添加到文档中，如果我们从侧面观察它们，想象它们处于垂直堆叠状态，那么它们的堆叠方式如下：

但是，如果给div元素 2 添加一个子元素，并给它设置上边距，使其在divy 轴上位于元素 3 的上方，会发生什么呢？重叠部分会被元素 3 遮挡住，这是预期的结果，因为在文档流中，div元素div3 位于元素 4 之后。div

z-index: 99999999999 !important 会有帮助……不

许多前端新手开发者会尝试使用z-index一个非常大的正值（或者负值，假设他们想要完全隐藏该元素div 4）来解决这个问题。但仅仅这样做是行不通的。

编辑：我最初写的是“如果不创建一个新的堆叠上下文，无论!importants你添加多少个9，z-index 都不会生效。” ** 我会在下面回应Temani Afif 的评论，并强调这一点：当 position 设置为 'fixed'、'sticky' 或 'relative' 且 z-index 设置为除 'auto' 之外的任何值时，就会创建一个新的堆叠上下文。单独设置 position 会将元素从文档流中移除，这意味着它不再遵循标记中元素绘制的顺序。但是，它仍然处于相同的堆叠上下文中。

理解堆叠上下文

让我们把二维笛卡尔坐标系表示法转换成三维或空间表示法。正如你可能已经猜到的，现在我们有三个点来指定一个点的位置：(x, y, z)

堆叠上下文是指添加到该 z 轴的每个新层，您现在可以重新排序，将元素置于顶部或将其置于默认上下文或其他上下文的下方。

顺序由索引定义，索引可以是 0、正整数、负整数或自动。

我建议您现在前往 MDN 官方文档，尽可能多地阅读有关堆叠上下文的内容。简而言之，您可以通过为容器 div 赋予以下属性和值来创建一个新的堆叠上下文：

• 你给它一个opacity不等于 0 的值。
• 你给它一个position“非此即彼”的选项static，以及一个z-index“非此即彼”的选项。auto
• 你可以给它display两者之一flex，grid或者一个z-index其他选项。auto
• 你使用transform，，，或perspective​filterclip-pathmask
• 或者您可以使用一些全新的属性，例如isolate（值为isolate）、will-change或contain。

好了，就这些！希望这篇文章对你有帮助，让你从此不再为 z-index 的问题而烦恼！如果这篇文章有错误或者你有什么改进建议，欢迎在评论区留言！