Z-index maximum and minimum value

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.

  <div class="container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
.container {
  position: relative;
  z-index: 1;
  z-index: 2;
  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.

Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.