Z-index maximum and minimum value

Sep 20, 2023

z-index is a CSS attribute used to apply stack order of HTML elements.

It is a z-order of an element position.

It only works with positions with absolute, relative, and fixed types.

It contains an integer value assigned to it

Following is an syntax

z-index: auto | <integer> | inherit;

It contains auto or integer or parent inherit.

Here is an example to stack one element over other with more z-index value.

<body>
  <div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
  </div>
</body>

.container {
  position: relative;
}
.box1 {
  z-index: 1;
}
.box2 {
  z-index: 2;
}
.box3 {
  z-index: 3;
}

z-index value can be any integer value.

Maximum value depends on the browser

The safest value is a 32 bit signed integer value. i.e 2147483647. However, It allows infinite values.

Some browsers allow safest maximum value is INT_MAX,

And WebKit browsers allow you with LLONG_MAX value, example is Chromium.