HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

CSS 中 z-index 属性的最大值和最小值是多少?

cssweb developmentfront end technology更新于 2024/3/22 3:56:17

在 CSS 中，z-index 属性用于将一个元素放置在另一个元素之上。例如，我们可以使用 CSS 创建多个 HTML 元素的堆栈。

如果您曾经使用过 z-index 属性，您一定见过它的值，例如 9、99、999、0、-9、-99999 等。您是否曾经问过自己 z-index 的最大值是多少?您是否在网上搜索过相关信息?如果没有，请阅读本指南。

z-index 属性的最大值等于 2147483647，最小值为 -2147483647。 2147483647 等于 232，即 32 位二进制数的最大值。

注意 − z-index 属性不适用于"静态"位置。因此，用户需要更改元素的位置。

这里，我们将通过各种示例学习如何使用 z-index 属性。

语法

用户可以按照以下语法使用 z-index 属性创建元素堆栈。

.class_name {
    z-index: -9;
}

在上面的语法中，我们使用了 -9 作为 z-index 的值，该值将应用于包含"class_name"类的 HTML 元素。

示例 1

在下面的示例中，我们创建了三个不同的 div 元素。我们使用 CSS 为 div 元素设置了样式。我们为 div 元素应用了不同的高度和宽度。此外，我们还为每个 div 元素设置了背景颜色。

我们为第一个 div 指定了 -9 的 z-index 值，为第二个 div 指定了 2 的 z-index 值，为第三个 div 指定了 10 的 z-index 值。在输出中，用户可以观察到第三个 div 位于每个 div 元素的顶部，而第二个 div 位于第一个和第三个 div 元素之间。

<html>
<head>
   <style>
      .div1 {
         position: absolute;
         width: 500px;
         height: 350px;
         background-color: aqua;
         z-index: -9;
      }
      .div2 {
         position: absolute;
         width: 300px;
         height: 300px;
         background-color: pink;
         z-index: 2;
         left: 50px;
         top: 50px;
      }
      .div3 {
         position: absolute;
         width: 200px;
         height: 200px;
         left: 200px;
         top: 200px;
         background-color: black;
         z-index: 10;
         color: white;
      }
   </style>
</head>
<body>
   <h2>Using the <i> Z-index property of CSS </i> to create a stack of elements</h2>
   <div class = "div1">
      <p> This is a first div. </p>
   </div>
   <div class = "div2">
      <p> This is a second div. </p>
   </div>
   <div class = "div3">
      <p> This is a third div. </p>
   </div>
</body>
</html>

示例 2

在下面的示例中，我们创建了两个嵌套的 div 元素，并为这两个 div 元素赋予了不同的类名。此外，我们为第一个 div 元素设置了"相对"位置，为第二个 div 元素设置了"绝对"位置。

我们为第一个 div 元素的 z-index 赋值为 -2147483647，为第二个 div 元素的 z-index 赋值为 2147483647。这意味着我们为这两个 div 元素分别分配了 z-index 的最小值和最大值。

div 元素在输出中按照 z-index 值的顺序显示。

<html>
<head>
   <style>
      .div1 {
         z-index: -2147483648;
         background-color: blue;
         width: 500px;
         height: 400px;
         position: relative;
      }
      .div2 {
         z-index: 2147483647;
         background-color: grey;
         width: 300px;
         height: 300px;
         position: absolute;
         top: 50px;
         left: 50px;
         font-size: 1rem;
      }
   </style>
</head>
<body>
   <h3>Using the <i> maximum value of Z-index property of CSS </i> to create a stack of elements</h3>
   <div class = "div1">
      <div class = "div2">
         <h3>This is the top most element</h3>
      </div>
   </div>
</body>
</html>

在本教程中，用户学习了如何在 HTML 元素中使用 z-index 属性。此外，用户还了解了 z-index 的最小值和最大值，它们等于 32 位二进制数的最小值和最大值。此外，每当我们将 z-index 属性应用于任何元素时，都应将其位置更改为"fixed"、"relative"或"absolute"。否则，它将无法正常工作。

相关文章

有用资源

打印 下一节:CSS 中 display: inline 和 display: inline-block 有什么区别? ❯❮ 上一节:如何使用 CSS 设置背景图片的大小?