CSS Z-index：关于如何创建和控制堆叠元素的指南

CSS z-index是 CSS 库中的一个工具，它允许您控制网页元素如何相互显示。这打开了创造性的可能性，您可以将文本放在图像上，或将图像放在文本上。此外，在本文中，我们将向您展示如何将 CSS z 索引用于创意目的。

不仅如此，我们还将解释网络浏览器何时会忽略 CSS z-index，以及您可以采取什么措施来修复它，因此请继续阅读以成为 z-index 专业人士。

什么是 CSS 中的 Z-index？

CSS 中的 Z-index是一个 CSS 属性，允许您控制元素在堆叠上下文中的堆叠顺序。如何使用 SmartClose 关闭和恢复所有正在运行的应用程序当您为元素指定位置时，您创建了一个堆叠上下文。此外，您可以将堆叠上下文想象成在您面前排成一排的三把椅子。在这种情况下，一把椅子总是在另一把椅子的前面。

您可以使用 z-index将最后一把椅子放在前面，或者，将第一把椅子放在队列的后面。更重要的是，队列中的项目有一个编号位置，这意味着 z-index 属性接受正数和负数值。最后，请记住默认的 z-index 为零。

如何在 CSS 中使用 Z-index

要在 CSS 中使用 z-index，您需要在 CSS 规则集中为给定元素指定 z-index CSS 属性。此外，您应该知道样式 z 索引适用于定位元素。这意味着要使 z 索引起作用，您必须将元素的位置设置为相对、绝对、固定或粘性值。如果元素未定位，Web 浏览器将忽略 z 索引。

我们将查看四个编码示例，详细说明如何在 CSS 中使用和设置 z-index 的样式，我们将从在单个元素上应用 z-index开始，然后是两个元素和三个元素。当所有元素都有一个 z-index 时，我们将看看如何使用负 z-index。

– 示例 1

在第一个示例中，HTML 包含三个 div 元素，每个元素的类名分别为一、二和三。CSS 代码具有一些美学风格，其余 CSS 代码执行以下操作：

• 将 div 位置设置为相对

• 给 div 定义高度和宽度

• 将 div 与一些边距对齐

<main> <div class=”one”> <code>z-index: 1</code> </div> <div class=”two”></div> <div class=”three”></div > </main> * { 保证金：0; 填充：0； 框大小：边框框； } /** 美学 **/ body { display: grid; 放置项目：中心； 高度：100vh； } main { 宽度：50%； 边框：5px 实心#1a1a1a； 填充：2em； 字体大小：1.2em； 行高：1.168； } /** 结束美学 **/ div { width: 120px; 高度：120px； 位置：相对； 显示：网格； 放置项目：中心； 颜色：#ffffff； 字体粗细：粗体； } div.one { 背景色：#1560bd； } div.two { 背景颜色：#ce101b; 保证金顶部：-2em； 左边距：1em； } div.three { 背景颜色：#69190b； 保证金顶部：-2em； 左边距：2em； }

当您在 Web 浏览器中运行代码时，所有内容都会根据它们在 HTML 中的顺序显示。蓝色框在红色框后面，红色框在棕色框后面。当您更改蓝框的 z-index 时，它会出现在红框上方。现在，让我们看看我们提到的剩余 CSS 代码：

div.one { 背景颜色：#1560bd; z-索引：1；/* 添加这个 */ }

– 示例 2

第二个示例建立在第一个示例的基础上，因此这次有两个框具有 z-index值：红色框和蓝色框。运行代码时，您会观察到红色框由于其较大的 z-index而出现在蓝色框上方：

<main> <div class=”one”> <code>z-index: 1</code> </div> <div class=”two”> <code>z-index: 2</code> </div > <div class=”three”></div> </main> * { 边距：0; 填充：0； 框大小：边框框； } /** 美学 **/ body { display: grid; 放置项目：中心； 高度：100vh； } main { 宽度：50%； 边框：5px 实心#1a1a1a； 填充：2em； 字体大小：1.2em； 行高：1.168； } /** 结束美学 **/ div { width: 120px; 高度：120px； 位置：相对； 显示：网格； 放置项目：中心； 颜色：#ffffff； 字体粗细：粗体； } div.one { 背景色：#1560bd； z-索引：1； } div.two { 背景颜色：#ce101b; 保证金顶部：-2em； 左边距：1em； z-指数：2；/* 注意这个 */ } div.three { background-color: #69190b; 保证金顶部：-2em； 左边距：2em； }

– 示例 3

在第三个示例中，所有三个框都有一个定义的 z-index 值。Web 浏览器将根据它们的 z-index 值堆叠它们，因此具有较低 z-index 的框将出现在具有较大 z-index 的框后面。

这一次，棕色盒子的 z-index 最高。结果，它将出现在蓝框和红框上方。为了让事情更清楚，我们更新了这个例子的代码。这些是代码的更新：

• <main> 标签有一个相对位置

• 棕色盒子有绝对位置

• Brown box CSS top 属性设置为零。这允许它移动到其父元素的内部顶部

• 棕色框的 z-index 为三

现在，让我们看一下更新后的代码本身：

<main class=”position-relative”> <div class=”one”> <code>z-index: 1</code> </div> <div class=”two”> <code>z-index: 2 </code> </div> <div class=”three”> <code>z-index: 3</code> </div> </main> * { margin: 0; 填充：0； 框大小：边框框； } /** 美学 **/ body { display: grid; 放置项目：中心； 高度：100vh； } main { 宽度：50%； 边框：5px 实心#1a1a1a； 填充：2em； 字体大小：1.2em； 行高：1.168； .position-relative { 位置：相对； } div { 宽度：120px； 高度：120px； 位置：相对； 显示：网格； 放置项目：中心； 颜色：#ffffff； 字体粗细：粗体； } div.one { 背景色：#1560bd； z-索引：1； } div.two { 背景颜色：#ce101b; 保证金顶部：-5em； 左边距：1em； z-指数：2； } div.three { 背景颜色：#69190b； 位置：绝对； 顶部：0； z-指数：3； }

– 示例 4

第四个示例建立在第三个示例的基础上。只有这一次，我们将对棕色框应用负 z-index 。负 z-index 会将棕色框发送到容器中两个框的后面。

当您在 Web 浏览器中运行下一个代码块时，棕色框出现在蓝色框和红色框的后面：

<main class=”position-relative”> <div class=”one align-items-start”> <code>z-index: 1</code> </div> <div class=”two”> <code> z-index: 2</code> </div> <div class=”three align-items-start”> <code>z-index: -1</code> </div> </main> * { 边距: 0; 填充：0； 框大小：边框框； } /** 美学 **/ body { display: grid; 放置项目：中心； 高度：100vh； } main { 宽度：50%； 边框：5px 实心#1a1a1a； 填充：2em； 字体大小：1.2em； 行高：1。168; } /** 结束美学 **/ .position-relative { position: relative; } .align-items-start { 对齐项目：开始； } div { 宽度：120px； 高度：120px； 位置：相对； 显示：网格； 放置项目：中心； 颜色：#ffffff； 字体粗细：粗体； } div.one { 背景色：#1560bd； z-索引：1； } div.two { 背景颜色：#ce101b; 保证金顶部：-5em； 左边距：1em； z-指数：2； } div.three { 背景颜色：#69190b； 位置：绝对； 顶部：0； z-指数：-1； }

现在你知道如何使用 CSS z-index 了，什么可以阻止 CSS z-index 工作？让我们找出来。

为什么 Z-index 不工作 CSS？

有两个主要条件会阻止 z-index 在 CSS 中工作。在第一种情况下，网络浏览器将忽略 z-index。对于第二种情况，z-index 似乎不起作用。

以下是可以阻止 z-index 工作的条件：

• 元素位置未设置

• 元素的父元素具有较低的 z-index

让我们更详细地讨论每个条件。

– 元素位置未设置

CSS z-index 适用于定位元素，因此如果您不设置元素的位置，网络浏览器将忽略您应用于该元素的任何 z-index 值。

例如，在下一个代码块中，HTML 中有两个 div 元素。同时，在 CSS 中，尝试使用 z-index 将第一个框移动到第二个框的顶部。当您在 Web 浏览器中运行代码时，您会注意到z-index 无效。结果，第一个盒子在第二个盒子后面：

<main> <div class=”one”> <code>z-index: 1</code> </div> <div class=”two”></div> </main> * { margin: 0; 填充：0； 框大小：边框框； } /** 美学 **/ body { display: grid; 放置项目：中心； 高度：100vh； } main { 宽度：50%； 边框：5px 实心#1a1a1a； 填充：2em； 字体大小：1.2em； 行高：1.168； } /** 结束美学 **/ div { width: 120px; 高度：120px； 显示：网格； 放置项目：中心； 颜色：#ffffff； 字体粗细：粗体； } div.one { 背景色：#1560bd； z-索引：1； } div.two { 背景颜色：#ce101b; 保证金顶部：-2em； 左边距：1em； }

从上面的代码片段中，您可以观察到div 元素的 CSS 规则没有定义位置。修复此问题您必须应用 CSS position 属性，然后 z-index 将按预期工作。您将在下一个代码块中找到修复：

div { 宽度：120px; 高度：120px； 显示：网格； 放置项目：中心； 颜色：#ffffff； 字体粗细：粗体； /* 添加一个位置 */ position: relative; }

– 元素的父元素具有较低的 Z 索引

当您在父元素上指定z-index 时，它会为其子元素创建一个新的堆叠上下文。也就是说，可以嵌套堆叠上下文。

例如，假设您有两个父元素 A 和 B，其 z-index 分别设置为 1 和 2。使用该集合，A 的子元素永远不会与元素 B 重叠，无论您将它们的 z-index 设置得有多大。那是因为 A 的堆叠上下文将它们隔离开来。

在下一个代码块中，有两个 div；第一个 div 的z-index为 1，其子 div 的 z-index 为 4。同时，第二个 div 的 z-index 为 2，因此第一个 div 的子 div 永远不会与第二个 div 重叠。这是因为与第二个 div 相比，它的父级具有较低的 z-index：

<main> <div class=”one”> <code>z-index: 1</code> <div class=”two”> <code>z-index: 4</code> </div> </div > <div class=”three”> <code>z-index: 2</code> </div> </main> * { margin: 0; 填充：0； 框大小：边框框； } /** 美学 **/ body { display: grid; 放置项目：中心； 高度：100vh； } main { 宽度：50%； 边框：5px 实心#1a1a1a； 填充：2em； 字体大小：1.2em； 行高：1.168； 高度：120px； 位置：相对； 显示：网格； 放置项目：中心； 颜色：#ffffff； 字体粗细：粗体； 填充：.2em； } div.one { 背景色：#1560bd； 位置：相对； z-索引：1； } div.two { 背景颜色：#ce101b; 左边距：1em； z-指数：4； } div.three { 背景颜色：#69190b； 左边距：2em； z-指数：2； }

接下来，让我们将注意力转向围绕 CSS z-index 的一些讨论主题。

一些讨论主题

以下是围绕 CSS z-index的讨论主题：

• 什么是 z 指数 9999？

• z index 最高的 CSS 是什么？

• z-index 会被继承吗？

• 其他创建堆叠上下文的 CSS 属性

我们将在下一节中更仔细地研究它们

1. Z Index 9999是什么？

这个大的 z 索引是为了确保元素始终位于顶部，因此您可以在某些 CSS 代码库中找到它。虽然它会起作用，但当您将来需要许多元素位于顶部时，它可能会导致问题。在大多数情况下，1 或 2 的 z-index 将适合您。

2. Z Index最高和最低的CSS是什么？

最高可能的 CSS z-index 为正 2147483647，最小为负 2147483647。有了这些信息，您可能希望使用较大的值，以便元素始终显示在顶部，但最好坚持使用我们之前提到的较小的值。

3. Z-index是否继承？

不，CSS z-index 不会被继承。您可以在您的 Web 浏览器开发人员工具中确认这一点。

4. 其他创建堆叠上下文的 CSS 属性

有创建堆叠上下文的 CSS 属性。这意味着这些属性可以使元素出现在其他元素之上。其中一些 CSS 属性包括 transform、opacity 和 will-change。

网络浏览器支持

所有网络浏览器都支持 CSS z-index 属性。

结论

CSS z-index 属性是您的 CSS 武器库中必不可少的工具，我们的文章教您如何很好地使用它。作为外卖，这里总结了您在本文中了解的有关 z-index 的所有内容：

• CSS z-index 允许您控制元素在堆叠上下文中的堆叠顺序

• CSS z-index 适用于定位元素。这意味着具有相对、绝对、固定或粘性定位的元素

• CSS z-index 接受正值和负值

• 负值会将元素移动到其父元素的后面

• 如果您没有设置元素的位置，Web 浏览器将忽略应用于该元素的任何 z-index 值

• 如果元素 A 和元素 B 的 z-index 分别为 1 和 2，则 A 的子元素永远不会与 B 的子元素重叠，无论它们的 z-index 值有多大

• CSS z-index 不被继承

• CSS z-index 具有全球网络浏览器支持

在这个阶段，您对CSS z-index有了深入的了解。这是对您的 CSS 技能的一个很好的补充，您甚至可以在我们的示例的基础上构建以适合您自己的项目。