59

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.

Herbertusz
  • 1,151
  • 1
  • 11
  • 19
  • 4
    This question is clearly not a duplicate of the [linked one](https://stackoverflow.com/questions/16148007/which-css-properties-create-a-stacking-context) - there is nothing about negative z-index there. Please consider reopening the question and removing the warning. – johndodo Apr 22 '18 at 19:55

2 Answers2

100

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.

stacking order

TylerH
  • 20,799
  • 66
  • 75
  • 101
sallf
  • 2,583
  • 3
  • 19
  • 24
38

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

Aaron
  • 24,009
  • 2
  • 33
  • 57
  • 4
    So there's nothing strange about it? I mean, if I have 3 elements with z-index -1, 0, 1 would be the same if I increase all of these, e.g. to 1, 2, 3? – Herbertusz Oct 19 '15 at 17:14
  • 11
    @Herbertusz yes, it would be the same. Now imagine you have 500 elements and want one of them to be under all the others. Would you rather set all the others to z-index=1, or just the one to z-index=-1 ? – Aaron Oct 19 '15 at 17:27
  • 1
    @Herbertusz note that by default elements fall under the [root context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). So if you want to set elements behind the `` for example, you pretty much have to use a negative z-index. – Pithikos Mar 04 '19 at 16:40
  • 4
    The default z-index is `auto` not `0`. See my answer below for more clarity. – sallf Jan 17 '20 at 15:56
  • 1
    I also noticed that controls in a negative z-index element stop being interactive – Juan De la Cruz Mar 26 '20 at 01:18
  • I just put what was supposed to be above with a positive index and left the interactive one with a negative index and everything worked fine – Juan De la Cruz Mar 27 '20 at 01:33
  • 1
    The initial value of `z-index` is `auto`. The stack level of the generated box in the current stacking context, by default, is `0`. – Dirk Diggler Sep 17 '20 at 15:40