z-index 基础详解

关于z-index网上其实有不少博文，写得也不错，不过有些帖子比较旧，而IE也已经更新到了IE11了，所以还是重新总结一下。由于 z-index 的属性表现和层级有关，有些特点在某些层级下才表现出来，所以按层次来举例子梳理比较清楚。

单层节点情况 z-index 的基本特点：
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 的原理和概念，需要阅读官方文档：

CSS2.1 . 9.9 Layered presentation

Appendix E. Elaborate description of Stacking Contexts

扩展阅读：

CSS z-index 属性的使用方法和层级树的概念

 

水平有限，错误欢迎指正。原创博文，转载请注明出处。