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>