Z-index的最大和最小值介绍

1,603 阅读1分钟

z-index是一个CSS属性,用于应用HTML元素的堆叠顺序。

它是一个元素位置的z-order。

它只对具有绝对、相对和固定类型的位置起作用。

它包含一个分配给它的整数值

以下是一个语法

z-index:auto | <integer> | inherit

它包含自动或整数或父级继承。

下面是一个例子,用更多的z-index值将一个元素堆叠在其他元素之上。

  <body>
  <div class="container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
</div>
.container {
  position: relative;
}
.box1{
  z-index: 1;
}
.box2{
  z-index: 2;
}
.box3{
  z-index: 3;
}

z-index值可以是任何整数值。

最大值取决于浏览器

最安全的值是一个32位有符号的整数值,即2147483647。然而,它允许无限的值。

一些浏览器允许最安全的最大值是INT_MAX。

而WebKit浏览器允许你使用LLONG_MAX值,例子是Chromium。