Z-Index Relative or Absolute?
CssPositioningZ IndexCss Problem Overview
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:
- What are the actual standards regarding z-index (on this topic specifically)?
- How do individual browsers vary in their actual implementation of this?
Thanks!
Css Solutions
Solution 1 - Css
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
>
> Auto 1.2 >
z-index properties are checked. If two
> z-index values equal, their position in the document tree are
> compared.
>
> Your case:
>
> 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>
Solution 2 - Css
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.
Solution 3 - Css
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.
Solution 4 - Css
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>