Z-Index Relative or Absolute?

Question

I'm trying to find an answer to the following question:

Is an element's z-index style its absolute stack order, or its stack order relative to its parent?

For instance, suppose I have the following code:

<div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div>

Which one will be in front - #dHello, or #dDomination?

That's just for examples. I've tried this in multiple places and results seem to vary. I'm seeing if anyone knows of an authoritative source for settling:

1) What are the actual standards regarding z-index (on this topic specifically)? 2) How do individual browsers vary in their actual implementation of this?

Thanks!

Answer 1

z-index is relative. See this detailed answer, which I wrote for a similar question.

If none of the other elements have a defined z-index, using z-index: 1 will be fine.

Model: How is the z-index determined?

                                         z-index
<div id=A>                                Auto 1
    <div id=B>                            Auto 1.1
       <div id=C style="z-index:1"></div>          Manual 1
       <div id=D></div>                   Auto 1.1.2
    </div>                                
    <div id=E></div>                      Auto 1.2
</div>
<div id=F></div>                          Auto 2

First, the direct child nodes of the body are walked through. Two elements are encountered: #A and #F. These are assigned a z-index of 1 and 2. This step is repeated for each (child) element in the document.

Then, the manually set z-index properties are checked. If two z-index values equal, their position in the document tree are compared.

Your case:

<div id=X style="z-index:1">          Z-index 1
    <div id=Y style="z-index:3"></div> Z-index 3
</div>
<div id=Z style="z-index:2"></div>    Z-index 2

You'd expect #Y to overlap #Z, because a z-index of 3 is clearly higher than 2. Well, you're wrong: #Y is a child of #X, with a z-index of 1. Two is higher than one, and thus, #Z will be shown over #X (and #Y).

Here is a plunker to visualize this a little better, or try the snippet below ,

.redbox,
.greenbox,
.bluebox {
  height: 100px;
  width: 100px;
  position: relative;
  color: #fff;
  padding: 3px;
}

.redbox {
  background: red;
  z-index: 1;
}

.greenbox {
  background: green;
  top: 40px;
  left: 40px;
  z-index: 3;
}

.bluebox {
  background: blue;
  top: -20px;
  left: 20px;
  z-index: 2;
}

<div id=X class='redbox'>z: 1
  <div id=Y class='greenbox'> z: 3</div>
</div>
<div id=Z class='bluebox'>z: 2</div>