THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
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>
.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.
