网页中元素的位置是开发人员分配的一个重要属性。如果你的元素放置不正确，那么它可能会显示为荒谬或无组织的。因此，开发人员明智地分配每个 HTML 元素的位置非常重要。
有时，尽管分配了各自的位置，但元素可能会重叠。这些重叠的元素可以彼此堆叠并且可以隐藏其他元素。为了解决这个问题，CSS 为网页设计提供了 z-index 属性。在这篇文章中，我们将学习 CSS 的 z-index 属性。我们还将讨论 z-index 的不同值以及它们之间的区别。
什么是 z-index 属性？
CSS 的 z-index 属性使开发人员能够指定在 z 轴上（即屏幕内或屏幕外）重叠的元素的顺序。但是，z-index 属性仅适用于指定了除 static 之外的位置值的元素。
HTML 元素的堆栈级别由 z-index 属性确定。元素在 Z 轴上的位置称为“堆栈级别”（与 X 轴或 Y 轴相对）。如果该值较高，则该元素将被放置在靠近堆叠顺序顶部的位置。这种堆叠排列垂直于视口或显示器。
HTML 页面中 Z 轴上组件的自然堆叠顺序受到多种因素的影响。这些是具有负堆叠上下文的元素、非定位、非浮动、块级元素、非定位、浮动元素、内联元素和定位元素，全部按显示顺序排列。
语法
element{
z-index: values;
}
以下是该属性的值 -
自动 - 重叠顺序与父级的值相同。这是默认值。
数字- 重叠的顺序指定为数字，如 1、2、3 等。
初始- 顺序设置为默认值。
继承- 重叠顺序由父元素继承。
示例
z-index property z-index property
This is an example.This is an example.
z-index 属性的自动值
z-index属性的auto值是与父元素相同的元素顺序。
示例
Auto value of z-index property z-index property
This is an example.
This is an example.
z-index 属性的零值
z-index 属性的零值是元素顺序的数值。将 z-index 值指定为 0，创建堆叠内容。例如，如果我们有两个元素元素 1 和元素 2，则它们的 z 索引分别为 1 和 0。因此，元素 1 将堆叠在元素 2 之上。而如果它们的 z 索引分别为 -1 和 0，则元素 1 将堆叠在元素 2 的下方。请考虑以下示例。
示例
Zero value of z-index property Tutorialspoint
z-index property
This is an example.
This is an example.
z-index 属性没有值
z-index 属性的值通常不会与 auto 值相同。
示例
No value for z-index property z-index property
This is an example.
结论
一个具有挑战性的主题是在 CSS 中堆叠上下文。在本文中，我们全面描述了网页上的堆叠上下文如何受到 z-index 的影响，当充分理解 z-index 时，它会转化为强大的 CSS 属性。既然熟悉了这一特性，新开发人员应该能够有效地使用它并避免一些可能发生的常见问题。高级开发人员还应该更加了解 z-index 的适当应用如何解决各种布局挑战并提供各种创造性的 CSS 设计选项。
