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

网页中的元素位置是开发者赋予的一个关键属性。如果你的元素没有正确放置，那么它可能会显示出荒谬或杂乱的样子。因此，开发者明智地赋予每个HTML元素的位置是很重要的。

有时候，即使相应位置已被分配，元素之间仍可能重叠。这些重叠的元素可能会堆叠在一起，隐藏其他元素。为了解决这个问题，CSS提供了用于网页设计的z-index属性。在本文中，我们将学习CSS的z-index属性。我们还将讨论不同的z-index值以及它们之间的区别。

什么是z-index属性

CSS的z-index属性允许开发者为重叠在z轴上的元素分配顺序，即屏幕内或屏幕外。然而，z-index属性只适用于具有指定位置值的元素（除了静态定位）。

HTML元素的堆叠级别由z-index属性确定。元素在Z轴上的位置被称为“堆叠级别”（相对于X轴或Y轴）。如果值较高，则元素将被放置在堆叠顺序的顶部。此堆叠顺序与视口或显示器垂直。

在HTML页面上，组件在Z轴上的自然堆叠顺序受到多种因素的影响。这包括具有负堆叠上下文的元素、非定位、非浮动的块级元素、非定位、浮动的元素、内联元素和定位元素，按照显示顺序排列。

语法

element{
   z-index: values;
}

以下是此属性的值：

Auto - 重叠顺序与父级的值相同。这是默认值。
Number - 重叠顺序以数字如1、2、3等分配。
Initial - 顺序设置为默认值。
Inherit - 重叠顺序从父元素继承。

示例

<!DOCTYPE html>
<html>
<head>
   <title>z-index property</title>
   <style>
      .demo1{
         font-family: cursive, Cochin, Georgia;
         background-color: red;
         position: absolute;
         top: 100px;
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
         background-color: #FFFF00;
         position: absolute;
         top: 100px;
         left: 300px;
         z-index: 2;
         width: 200px;
      }
   </style>
</head>
<body>
   <center>
      <h2> z-index property </h2>
      <div class= "demo1"> This is an example. </div>
      <div class= "demo2"> This is an example. </div>
   </center>
</body>
</html>

z-index属性的自动值

z-index属性的自动值是元素的顺序与父元素相同。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Auto value of z-index property</title>
   <style>
      .demo1{
         font-family: verdana,'cursive';
         background-color: #FFFF00;
         position: absolute;
         top: 120px;
         z-index: auto;
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
         background-color: red;
         position: absolute;
         top: 200px;
         z-index: auto;
      }
   </style>
</head>
<body>
   <center>
      <h2>z-index property</h2>
      <p class= "demo1"> This is an example. </p>
      <p class= "demo2"> This is an example. </p>
   </center>
</body>
</html>

z-index属性的零值

z-index属性的零值是对元素顺序的数字值。将z-index值指定为0会创建一个堆叠内容。例如，如果我们有两个元素元素1和元素2，它们的z-index分别为1和0。所以，元素1将叠放在元素2之上。而如果它们的z-index分别为-1和0，那么元素1将叠放在元素2之下。请看下面的示例。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Zero value of z-index property</title>
   <style>
      .demo1{
         font-family: cursive, Cochin, Georgia;
         background-color: #FF0000;
         position: absolute;
         top: 120px;
         z-index: 0;
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
         background-color: red;
         position: absolute;
         top: 100px;
         left: 300px;
         z-index: 0;
         width: 200px;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <h2>z-index property</h2>
   <p class= "demo1">This is an example.</p>
   <p class= "demo2">This is an example.</p>
</body>
</html>

z-index属性没有值

z-index属性没有值通常与auto值相同。

示例

<!DOCTYPE html>
<html>
<head>
   <title>No value for z-index property</title>
   <style>
      .demo{
         font-family: cursive, Cochin, Georgia;
         background-color: #FFFF00;
         position: absolute;
         top: 120px;
      }
   </style>
</head>
<body>
   <h2>z-index property</h2>
   <p class= "demo">This is an example.</p>
</body>
</html>

结论

在CSS中，叠加上下文是一个具有挑战性的主题。在本文中，我们对网页上的叠加上下文如何受z-index影响进行了详细描述，并且当完全理解时，它会转化为一种强大的CSS属性。现在，新的开发者应该能够有效地使用它，并且避免一些常见的问题。高级开发者也应该更加清楚如何适当地应用z-index来解决各种布局挑战，并提供多种创意的CSS设计选项。