z-index 基础详解

时间：2015-04-19 01:00:49 阅读：155 评论：0 收藏：0 [点我收藏+]

标签：

关于z-index网上其实有不少博文，写得也不错，不过很多比较老，所以对于IE对z-index解析的说法不是很准确，所以还是重新总结一下。由于 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 才有效；

3、当设置 position 的值为 absolute，relative，fixed 而不显式设置 z-index 的值时，此时position设置为 absolute，relative，fixed 的元素会覆盖其他没有声明 position 或声明 position 为 static 的元素；

--------------------------------------------------------------举个栗子--------------------------------------------------------------

沿用上例，设置div_1的position属性为relative：

HTML：

1 <div class="container">
2     <div class="div_1">
3         <p>设置position为relative的div_1</p>
4     </div>
5     <div class="div_2">
6         <p>div_2依然未设置position</p>
7     </div>
8 </div>

CSS：

1 .div_1{
2     background:#ffff00;
3     border:10px solid #ffff00;
4     color:#0000ff; 
5     position:relative;
6 }

chrome，Firefox，opera，IE6+均表现如下：

--------------------------------------------------------------吃完栗子--------------------------------------------------------------

4、当 position 为absolute，relative，fixed 的时候按 z-index 的值分层，z-index 的值可以为负值；

--------------------------------------------------------------举个栗子--------------------------------------------------------------

这里只举z-index的值可以为负数的例子，和上例一样，只是在设置 div_1 的 z-index 值为-1：

HTML：

1 <div class="div_1">
2     <p>设置position为relative的div_1</p>
3 </div>
4 <div class="div_2">
5     <p>div_2依然未设置position为relative</p>
6 </div>

CSS：

 1 .div_1,.div_2{
 2     width: 100px;
 3     height:100px;
 4     font-family: arial;
 5 }
 6 .div_1{
 7     background:#ffff00;
 8     border:10px solid #ffff00;
 9     color:#0000ff; 
10     position:relative;
11     z-index: -1;
12 }
13 .div_2{
14     background:#00ff00;
15     border:10px solid #00ff00;
16     margin-top: -70px;
17     color:#000;
18 }

chrome，Firefox，opera，IE6+均表现如下：

可见设置 z-index 为负数甚至比未设置 position 的div层次还要低。

--------------------------------------------------------------吃完栗子--------------------------------------------------------------

双层节点结构 z-index 的基本特点：

1、子集元素层次永远比父级元素要高，即永远在父级元素上面；

2、父级元素没有设置 position 或当父级元素设置了 position 但没有设置 z-index时，子级元素的比较和单层结构表现一样；

3、当父级元素设置了 position 且设置了 z-index 时，会创建一个层叠上下文（Stacking Contexts），子级元素的层级比较由父级元素决定，父级元素层级高，则子级元素层级就高。当父级元素的 z-index 的值相同时，则按照文档普通流先后顺序决定，即后面的元素层级更高；

--------------------------------------------------------------举个栗子--------------------------------------------------------------

HTML：

 1 <div class="wrap_1">
 2     <div class="div_1">
 3         <p>设置position为relative，z-index为10的div_1</p>
 4     </div>
 5 </div>
 6 <div class="wrap_2">
 7     <div class="div_2">
 8         <p>div_2设置position为relative,z-index为100</p>
 9     </div>
10 </div>

CSS：

 1 .wrap_1{
 2     position: relative;
 3     z-index: 2;
 4 }
 5 .wrap_2{
 6     position: relative;
 7     z-index: 1;
 8 }
 9 .div_1,.div_2{
10     width: 100px;
11     height:100px;
12     font-family: arial;
13 }
14 .div_1{
15     background:#ffff00;
16     border:10px solid #ffff00;
17     color:#0000ff; 
18     position: relative;
19     z-index: 10;
20 }
21 .div_2{
22     background:#00ff00;
23     border:10px solid #00ff00;
24     margin-top: -70px;
25     color:#000;
26     position: relative;
27     z-index: 100;
28 }

chrome，Firefox，opera，IE6+均表现如下，因为父级元素设置了 z-index，且 wrap_1 的 z-index 的值大于 wrap_2 的 z-index 的值，子级元素表现跟随父元素：

--------------------------------------------------------------吃完栗子--------------------------------------------------------------

4、当设置 position 的值为 absolute，relative，fixed 而不显式设置 z-index 的值时，在chrome，Firefox，opera，IE8+上 z-index 的默认值为 auto，而IE7及更低版本的IE的 z-index 的默认值为0，即创建一个层叠上下文（Stacking Contexts）；

这里会出现的问题是，当父级元素设置 position 的值为 absolute，relative，fixed 而不显式设置 z-index 的值时，在chrome，Firefox，opera，IE8+ 表现出双层节点结构基本特点2，而IE7-的浏览器则表现出双层节点结构基本特点3，即相当于设置了相同的 z-index 值；

--------------------------------------------------------------举个栗子--------------------------------------------------------------

HTML：

 1 <div class="wrap_1">
 2     <div class="div_1">
 3         <p>设置position为relative，z-index为2的div_1</p>
 4     </div>
 5 </div>
 6 <div class="wrap_2">
 7     <div class="div_2">
 8         <p>div_2设置position为relative,z-index为1</p>
 9     </div>
10 </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: 2;
}
.div_2{
   background:#00ff00;
   border:10px solid #00ff00;
   margin-top: -70px;
   color:#000;
   position: relative;
   z-index: 1;
}

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: 2;
}
.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: 100;
}
.div_2{
   background:#00ff00;
   border:10px solid #00ff00;
   margin-top: -70px;
   color:#000;
   position: relative;
   z-index: 10;
}

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 属性的使用方法和层级树的概念

水平有限，错误请大牛不吝指出。原创博文，转载请注明出处。

z-index 基础详解

标签：

原文地址：http://www.cnblogs.com/JuFoFu/p/4438375.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行