CSS 中 auto、0 和 no z-index 之间的区别

当我们必须在 z 轴上对元素进行排序时，我们使用z-index属性。在 CSS 中， z-index属性仅适用于位置值不是静态的元素。在本文中，我们将了解 z-index 属性及其值、auto、number、initial 和 inherit。我们还将看到所有值之间的差异。

句法：

z-index: auto | integer | initial | inherit;

属性：该属性具有上面提到和下面描述的以下值。

• auto：它将堆栈顺序设置为等于其父级。这是默认值。
• 整数：它设置元素的堆栈顺序。我们也可以使用负数。
• 初始值：它将此属性设置为其默认值。
• 继承：它从其父元素继承此属性。

注意： z-index 属性不适用于静态位置元素。

以下示例将有助于理解属性值之间的差异。

示例 1：在此示例中，我们将在元素上使用 z-index 属性。

HTML

输出：

示例 2：在此示例中，我们将在两个元素上使用 z-index 属性。

HTML

输出：我们可以清楚地看到 z-index auto 和 no z-index 之间没有区别。

示例 3：当我们将 z-index 指定为 0 时，它会创建一个堆叠上下文。

HTML

输出：

示例说明：在第一个示例中，我们可以看到绿色位于蓝色和红色之上，这是由于绿色的 z-index 为 1。因此创建了一个堆叠上下文。

但是在第二个示例中，由于红色的 z-index 为 0，因此绿色位于红色上方但蓝色下方。因此，在与蓝色相同的级别创建了堆叠上下文。