Z-Index Relative or Absolute?

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!

Rob W

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>

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.

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.

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>

来源：https://stackoverflow.com/questions/7490146/z-index-relative-or-absolute

标签

css

positioning

z-index