CSS negative z-index: what does it mean?

Question

What is the expected effect according to the standards, if I add a negative integer value to the z-index property of an element?

I searched for the answer but only have found this:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
The "Negative values to lower the priority" doesn't mean anything for me.

Answer 1

The accepted answer is on the right track, but isn't entirely true.

For starters, the initial value of z-index is auto, not 0.

When you assign an element z-index: 0 (or any other integer), you're creating a new stacking context. z-index: auto does not create a stacking context. This is important because a parent with auto will appear in front of a child with -1, but a parent with 0 will appear behind a child with -1 (see snippet).

Each stacking context will order its content according to the stacking order.

It's also important to note that z-index only works on positioned elements. Positioned elements are anything other than the initial position: static - so relative, absolute, etc.

Additionally, you should be aware that changes to certain css properties like filter, transform and opacity can also create a new stacking context. See the resources below for more clarity.

p {   position: absolute;   top: 100%;   width: 200px;   margin: 0 } .container {   width: 200px;   height: 200px;   display: inline-block;   background: none; } .box {   position: relative;   background: lightgrey;   width: 100px;   height: 100px;   padding: 15px; } .red {   background: lightcoral; } .z-1 {   z-index: -1; } .z0 {   z-index: 0; }

<div class="container">   <div class="box">     z auto (initial)     <div class="box red z-1">z -1</div>   </div>   <p>Parent: auto / Child: -1</p> </div>    <div class="container">   <div class="box z0">     z 0     <div class="box red z-1">z -1</div>   </div>   <p>Parent: 0 / Child: -1</p> </div>

Additional Information

CSS properties that create a stacking context

See how opacity can affect the stacking context

Read another in-depth article on stacking order.

Answer 2

An element with a negative z-index will be rendered under most elements, unless they have an even lower z-index.