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!

score 92 · Answer 1 · edited Nov 20 '18 at 22:55

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>

Mind = blown! I've been CSSing for about 10 years and this is a revelation! Thanks. — Ben Hull, Nov 18 '15 at 11:47
Keep in mind, that siblings with the same z-index will be merged (their children can be mixed). — Dávid Horváth, May 06 '17 at 22:41
If you remove the z-index on X in your example, a new stacking context is NOT created and 3 WILL overlap 2 — fionbio, Sep 23 '20 at 18:02

score 13 · Answer 2 · answered Sep 20 '11 at 18:49

13

Afaik, z-index doesn't work unless that element is set to position: relative; If that same element had a child with position: relative; and the z-index was set higher, the child would show on top of its parent.

So it has elements of both 'absolute' and 'relative' stack order as you phrased it.

All browsers pretty much handle it the same, I think.

answered Sep 20 '11 at 18:49

Chris G.

3,963
2
21
40

IE6 does not handle z-index like the majority of other browsers – Jarrett Widman Sep 20 '11 at 18:51
47

IE6 isn't a browser. Or, at least, it shouldn't be given the attention of one. – Tom Murray Sep 20 '11 at 20:24
4

Those people still using IE6 should not really be cared about, agree! – Helmut Aug 02 '12 at 10:16

score 0 · Answer 3 · answered Sep 20 '11 at 18:56

Here is the W3C specification for z-index.

I think the most important line, based on your question is the following:

The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.

This seems to indicate that nothing can be drawn in between the div with z-index: -100 and the div with z-index: 200.

score -1 · Answer 4 · answered Oct 26 '13 at 15:07

For example:

  <!DOCTYPE html>
<html>
<head>
<style>

.x1 {
    position:relative;
    width:100%;
    clear:both;
    display:block;
  z-index:1000;
}

.x2 {
    position:fixed;
    width:100%;
    height:50px;
    background-color:#ff0000;
}

.x3 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#888;
}
.x4 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#0000ff;
}
.x5 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#ff00ff;
}
.x6 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#0000ff;
}

</style>

</head>
<body>
<div class='x1'>this class is relative
<div class='x2'>this class is fixed</div>
</div>

<div class='x3'>x3: this class is relative</div>
<div class='x4'>x4: this class is relative</div>
<div class='x5'>x5: this class is relative</div>
<div class='x6'>x6: this class is relative</div>
<div class='x3'>x3: this class is relative</div>

</body>
</html>

Z-Index Relative or Absolute?

4 Answers4

Model: How is the z-index determined?

Linked