关于z-index网上其实有不少博文，写得也不错，不过有些帖子比较旧，而IE也已经更新到了IE11了，所以还是重新总结一下。由于 z-index 的属性表现和层级有关，有些特点在某些层级下才表现出来，所以按层次来举例子梳理比较清楚。
单层节点情况 z-index 的基本特点：
1、当不设置 position 或者设置 position 的值为 static 时，文档按照普通流顺序，后面的元素会覆盖前面的元素。内容方面则有区别，在chrome，opera，Firefox，IE8+中并不会覆盖内容部分（不过暂时对这个现象的本质不是很理解），而IE6，IE7则全部覆盖；
1、当不设置 position 或者设置 position 的值为 static 时，文档按照普通流顺序，后面的元素会覆盖前面的元素。内容方面则有区别，在chrome，opera，Firefox，IE8+中并不会覆盖内容部分（不过暂时对这个现象的本质不是很理解），而IE6，IE7则全部覆盖；
--------------------------------------------------------------举个栗子--------------------------------------------------------------
HTML：
<div class="container">
<div class="div_1">
<p>未设置position的div_1</p>
</div>
<div class="div_2">
<p>div_2同样未设置position</p>
</div>
</div>
CSS：
.div_1,.div_2{
width: 100px;
height:100px;
}
.div_1{
background:#ffff00;
border:10px solid #ffff00;
color:#0000ff;
}
.div_2{
background:#00ff00;
border:10px solid #00ff00;
margin-top: -70px;
color:#000;
}chrome，opera，Firefox，IE8+表现如下：
而IE6，IE7表现如下：
--------------------------------------------------------------吃完栗子--------------------------------------------------------------
2、只有 position 的值为 absolute，relative，fixed 的时候 z-index 才有效，设置了有效 z-index 值的元素会创建一个层叠上下文（Stacking Contexts）；
3、当设置 position 的值为 absolute，relative，fixed 而不显式设置 z-index 的值时，此时position设置为 absolute，relative，fixed 的元素会覆盖其他没有声明 position 或声明 position 为 static 的元素；
--------------------------------------------------------------举个栗子--------------------------------------------------------------
沿用上例，设置div_1的position属性为relative：
HTML：
<div class="container">
<div class="div_1">
<p>设置position为relative的div_1</p>
</div>
<div class="div_2">
<p>div_2依然未设置position</p>
</div>
</div>
CSS：
.div_1{
background:#ffff00;
border:10px solid #ffff00;
color:#0000ff;
position:relative;
}chrome，Firefox，opera，IE6+均表现如下：
--------------------------------------------------------------吃完栗子--------------------------------------------------------------
4、当 position 为absolute，relative，fixed 的时候按 z-index 的值分层，z-index 的值可以为负值；
--------------------------------------------------------------举个栗子--------------------------------------------------------------
这里只举z-index的值可以为负数的例子，和上例一样，只是在设置 div_1 的 z-index 值为-1：
HTML：
<div class="div_1">
<p>设置position为relative的div_1</p>
</div>
<div class="div_2">
<p>div_2依然未设置position为relative</p>
</div>
CSS：
.div_1,.div_2{
width: 100px;
height:100px;
font-family: arial;
}
.div_1{
background:#ffff00;
border:10px solid #ffff00;
color:#0000ff;
position:relative;
z-index: -1;
}
.div_2{
background:#00ff00;
border:10px solid #00ff00;
margin-top: -70px;
color:#000;
}chrome，Firefox，opera，IE6+均表现如下：
可见设置 z-index 为负数甚至比未设置 position 的div层次还要低。
（2015.4.30）补充：在 IE6，IE7 中会出现 bug，主要是 hasLayout 属性引起的。即当父元素设置 position:relative，div_1 触发了hasLayout 而 div_1 没有触发 hasLayout 时，设置 div_1 的 z-index 为-1时，仍然会覆盖 div_2 的 background，见例子：
HTML：
<div class="wrap">
<div class="div_1">
<p>设置position为relative的div_1</p>
</div>
<div class="div_2">
<p>div_2依然未设置position为relative</p>
</div>
</div>
CSS：
.wrap {
position: relative;
}
.div_1 {
background: #ffff00;
border: 10px solid #ffff00;
color: #0000ff;
position: absolute;
z-index: -1;
}
.div_2 {
background: #00ff00;
border: 10px solid #00ff00;
margin-top: 0px;
color: #000;
}chrome，Firefox，opera，IE8+表现如下：
IE6，IE7表现如下：
解决方法：
1、去掉父元素的 position:relative 属性，这要看具体情况，当父元素自己定位需要或者需要为设置 position 为 absolute 的子元素提供定位基准的时候当然就不能轻易去掉了；
2、为 div_2 触发 hasLayout 属性，即修改 div_2 的 CSS为：
.div_2 {
background: #00ff00;
border: 10px solid #00ff00;
margin-top: 0px;
color: #000;
*zoom:;/*触发div_2的hasLayout属性*/
}--------------------------------------------------------------吃完栗子--------------------------------------------------------------
双层节点结构 z-index 的基本特点：
1、当设置 position 的值为 absolute，relative，fixed 而不显式设置 z-index 的值时，在chrome，Firefox，opera，IE8+上 z-index 的默认值为 auto，而IE6、IE7 的 z-index 的默认值为0；
2、若父级元素创建了层叠上下文（Stacking Contexts），子级元素层次永远比父级元素要高，即永远在父级元素上面；由双层节点结构基本特点1可知IE6、IE7中只要设置 position 的值为 absolute，relative，fixed 则会为元素创建一个层叠上下文（Stacking Contexts），所以这里会出现一些兼容性问题，下面会穿插讲述。
3、父级元素没有设置 position 或当父级元素设置了 position 但没有设置 z-index时，子级元素的比较和单层结构表现一样，当子级元素设置了有效的负的 z-index 值时，层级比父级元素低；
--------------------------------------------------------------举个栗子--------------------------------------------------------------
HTML：
<div class="wrap_1">
<div class="div_1">
<p>设置position为relative，z-index为-1的div_1</p>
</div>
</div>
CSS：
.wrap_1{
width: 200px;
background-color: #999;
}
.div_1{
width: 100px;
height:100px;
font-family: arial;
background:#ffff00;
border:10px solid #ffff00;
color:#0000ff;
position: relative;
z-index: -1;
}chrome，Firefox，opera，IE6+表现如下：
chrome审查元素后可以看到 div_1 已经隐藏到 wrap_1 后面去了：
此时设置 wrap_1 的 position 属性为 relative：
.wrap_1{
position: relative;
width: 200px;
background-color: #999;
}此时chrome，Firefox，opera，IE8+表现不变，而IE6，IE7的表现为：
双层节点结构基本特点1可知，因为此时 wrap_1被默认设置 z-index 为0，子级元素 div_1 表现出双层节点结构基本特点2。显式设置 wrap_1 的 z_index 为0会在chrome，Firefox，opera，IE8+下有同样的显示效果；
--------------------------------------------------------------吃完栗子--------------------------------------------------------------
4、当父级元素设置了 position 且设置了 z-index 时，会创建一个层叠上下文（Stacking Contexts），子级元素的层级比较由父级元素决定，父级元素层级高，则子级元素层级就高。当父级元素的 z-index 的值相同时，则按照文档普通流先后顺序决定，即后面的元素层级更高；
--------------------------------------------------------------举个栗子--------------------------------------------------------------
HTML：
<div class="wrap_1">
<div class="div_1">
<p>设置position为relative，z-index为10的div_1</p>
</div>
</div>
<div class="wrap_2">
<div class="div_2">
<p>div_2设置position为relative,z-index为100</p>
</div>
</div>
CSS：
.wrap_1{
position: relative;
z-index:;
}
.wrap_2{
position: relative;
z-index:;
}
.div_1,.div_2{
width: 100px;
height:100px;
font-family: arial;
}
.div_1{
background:#ffff00;
border:10px solid #ffff00;
color:#0000ff;
position: relative;
z-index:;
}
.div_2{
background:#00ff00;
border:10px solid #00ff00;
margin-top: -70px;
color:#000;
position: relative;
z-index:;
}chrome，Firefox，opera，IE6+均表现如下，因为父级元素设置了 z-index，且 wrap_1 的 z-index 的值大于 wrap_2 的 z-index 的值，子级元素表现跟随父元素：
--------------------------------------------------------------吃完栗子--------------------------------------------------------------
当父级元素设置 position 的值为 absolute，relative，fixed 而不显式设置 z-index 的值时，在chrome，Firefox，opera，IE8+ 表现出双层节点结构基本特点3，而IE6、IE7的浏览器则表现出双层节点结构基本特点4，即相当于设置了相同的 z-index 值；
--------------------------------------------------------------举个栗子--------------------------------------------------------------
HTML：
<div class="wrap_1">
<div class="div_1">
<p>设置position为relative，z-index为2的div_1</p>
</div>
</div>
<div class="wrap_2">
<div class="div_2">
<p>div_2设置position为relative,z-index为1</p>
</div>
</div>
CSS：
.wrap_1{
position: relative;
}
.wrap_2{
position: relative;
}
.div_1,.div_2{
width: 100px;
height:100px;
font-family: arial;
}
.div_1{
background:#ffff00;
border:10px solid #ffff00;
color:#0000ff;
position: relative;
z-index:;
}
.div_2{
background:#00ff00;
border:10px solid #00ff00;
margin-top: -70px;
color:#000;
position: relative;
z-index:;
}chrome，Firefox，opera，IE8+表现如下：
IE6，IE7表现如下，因为 wrap_1 和 wrap_2 默认 z-index 的值为 0，值相同，则按照文档普通流顺序排列，后面的元素覆盖前面的元素，即 wrap_2 层级高于 wrap_1，他们的子元素表现均跟随父元素：
针对特点3和特点4，这里举一个例子可以看到两个特点的表现：
HTML：
<div class="wrap_1">
<div class="div_1">
<p>设置position为relative，z-index为100的div_1</p>
</div>
</div>
<div class="wrap_2">
<div class="div_2">
<p>div_2设置position为relative,z-index为10</p>
</div>
</div>
CSS：
.wrap_1{
position: relative;
z-index:;
}
.wrap_2{
position: relative;
}
.div_1,.div_2{
width: 100px;
height:100px;
font-family: arial;
}
.div_1{
background:#ffff00;
border:10px solid #ffff00;
color:#0000ff;
position: relative;
z-index:;
}
.div_2{
background:#00ff00;
border:10px solid #00ff00;
margin-top: -70px;
color:#000;
position: relative;
z-index:;
}chrome，Firefox，opera，IE8+的表现如下。根据特点2，因为此时 div_1 父元素 wrap_1 设置了有效的 z-index 值，而 div_2 的父元素没有设置 z-index，故比较层级时，用 div_1 的父元素 wrap_1 的 z-index 值 2 和 div_2 的 z-index 值 10 比较，所以尽管 div_1 设置 z-index 的值为 100，还是跟随父元素层级小于 div_2：
IE6，IE7表现如下。根据特点3， wrap_2 有默认值 0，所以 div_1 和 div_2 的层级比较就变成了 wrap_1 和 wrap_2 的层级比较：
--------------------------------------------------------------吃完栗子--------------------------------------------------------------
多层和双层是一样的道理，兄弟元素直接比较 z-index 的值；否则用设置了有效 z-index 值（拥有层叠上下文）的祖先元素的 z-index 值进行比较。
注：
1、这里文章举的例子不是很多，因为里面很多基础的概念想必很多人都知道。更多例子可以参考 NeoEase 的 position 属性和 z-index 属性对页面节点层级影响的例子
2、这里讲到的 z-index 的特点是偏实用性的，很多基本概念并没有涉及。如果要比较深入地了解层叠上下文（Stacking Contexts）和 z-index 的原理和概念，需要阅读官方文档：
扩展阅读：
水平有限，错误欢迎指正。原创博文，转载请注明出处。