z-index

div.test { position: relative; z-index: 10;}
div.test1 { position: absolute; z-index: -1;}
div.test2 { position: absolute; z-index: auto;}

Value	Description
auto	Places the element at the same level as its parent element. No new 'stacking context' is created. The initial value is 'auto'.
number	Specifies the stacking order (stack level) as a numeric value. No unit is used. Negative values are also allowed. Elements specified with a numeric value create a new 'stacking context'.

<div style="z-index: 2; position: absolute; border: solid 7px #ff0; width: 200px; height: 200px;">This is a div element. 'z-index: 2' is specified.</div>
<div style="z-index: 1; position: absolute; border: solid 7px #0ff; width: 200px; height: 200px; left: 100px; top: 100px;">This is a div element. 'z-index: 1' is specified.</div>

※ Version data is based on MDN.

Specifies the stacking order (stack level) of elements. The 'z-index' property applies to elements whose 'position' property is set to a value other than 'static'.

An important note when using 'z-index': this property adjusts the stacking order within the 'stacking context' the element belongs to. A 'stacking context' is a grouping that forms the depth structure of elements. The html element automatically creates a 'root stacking context', so every element belongs to some stacking context.

When the value is 'auto', the element is placed at the same level (stacking context) as its parent. Like normal layout, elements written lower in the source appear on top. In this case, no new 'stacking context' is created. Elements with 'auto' have a stack level of '0'. The difference between 'z-index: auto' and 'z-index: 0' is whether a new 'stacking context' is created.

<p>All elements below have 'z-index: auto'. So the aqua-bordered div, which is written lower in the source than the yellow-bordered div, appears on top.</p>
<div style="z-index: auto; position: absolute; border: solid 7px yellow; width: 200px; height: 200px;">This is a div element. 'z-index: auto' is specified.</div>
<div style="z-index: auto; position: absolute; border: solid 7px aqua; width: 200px; height: 200px; left: 100px; top: 150px;">This is a div element. 'z-index: auto' is specified.</div>

When specified as a numeric value, within the same 'stacking context', the element with the larger value appears in front. Even negative values cannot place an element behind its own stacking context. If elements share the same stacking context, simply the one with the higher number appears in front.

<p>All elements below belong to the 'root stacking context' created by the html element. So the element with the higher 'z-index' value simply appears in front.</p>
<div style="z-index: 0; position: absolute; border: solid 7px yellow; width: 200px; height: 200px;">This is a div element. 'z-index: 0' is specified.</div>
<div style="z-index: -1; position: absolute; border: solid 7px aqua; width: 200px; height: 200px; left: 100px; top: 200px;">This is a div element. 'z-index: -1' is specified.</div>

When specified as a numeric value, a new 'stacking context' is created. If the element has an ancestor element whose 'z-index' property is set to a value other than 'auto', it belongs to the stacking context created by that ancestor. The stacking order of a different stacking context cannot be adjusted by the element's own 'z-index'. When elements belong to different stacking contexts, it is no longer simply a matter of the higher number appearing in front. Think of it as: you cannot interfere with a different world (stacking context).

<p>Below there is a div element (yellow border) with 'z-index: 0' and a div element (aqua border) with 'z-index: -1'. A child div (red text) of the aqua-bordered div has 'z-index: 100'. However, since the stacking context of the 'z-index: 100' element has 'z-index: -1', no matter how large a value is specified, it can never appear in front of the yellow-bordered div.</p>
<div style="z-index: 0; position: absolute; border: solid 7px yellow; width: 200px; height: 200px;">This is a div element. 'z-index: 0' is specified.</div>
<div style="z-index: -1; position: absolute; border: solid 7px aqua; width: 300px; height: 200px; left: 100px; top: 240px;">
	This is a div element. 'z-index: -1' is specified.
	<div style="z-index: 100; color: red;">This is a div element. 'z-index: 100' is specified. Due to its stacking context, this element can never appear in front of the yellow-bordered div.</div>
</div>

The maximum and minimum numeric values are within the range of a 32-bit signed integer, so per the CSS specification the range is '-2147483648' to '2147483648'. However, using extremely large or small values for 'z-index' is generally uncommon in typical implementations and is best avoided.

The 'z-index' property is also explained in detail in this article.