极客笔记CSS z-index属性的最大和最小值是多少
在CSS中，z-index属性用于将一个元素叠放在另一个元素上面。例如，我们可以使用CSS创建多个HTML元素的堆栈。
如果你曾经使用过z-index属性，你可能会看到它的取值如9, 99, 999, 0, -9, -99999等等。你有没有想过z-index的最大值是多少，有没有在网络上研究过？如果没有，请阅读本指南。
z-index属性的最大值为2147483647，最小值为-2147483647。数字2147483647等于232，是32位二进制数的最大值。
注意： z-index不适用于’static’定位。所以，用户需要改变元素的位置。
在这里，我们将通过各种示例来学习如何使用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的值，给第三个div赋予了10的值。在输出中，用户可以观察到第三个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元素设置了’relative’位置，而给第二个div元素设置了’absolute’位置。
我们将第一个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’。否则，它将无法工作。