在开始今天的内容之前，先让我们来看下面一段代码：

<style type="text/css">
   #div1,#div2{
       width:200px;
       height:200px;
       background-color:red;
       position: relative;
       z-index:1;
   }
    #div2{
        background-color:green;
        z-index:0;
    }
    #div1_1,#div2_1{
        width:100px;
        height:100px;
        background-color:black;
    }
    #div1_1{
        position:relative;
        z-index:-100;
        left:80px;
        top:140px;
    }
   #div2_1{
       background-color:yellow;
       z-index:999;
       position: relative;
       left:160px;
       top:-50px;
   }

</style>
<body>
<div id="div1">
    我是div1
    <div id="div1_1">
        我是div1_1
    </div>
</div>
<div id="div2">
    我是div2
    <div id="div2_1">
        我是div2_1
    </div>
</div>
</body>

'

???excuse me?为什么div2_1的z-index值都999了还是比div1的元素层级低？div1_1的z-index值都为-100了还比div1高呢？不要着急，且听我慢慢道来。

首先我们对一个东西不熟悉的时候要先弄懂三个东西：1.这个东西是什么？2.有什么用？3.怎么用？

我们下面也是按这三个步骤来讲解这个z-index属性。首先第一，二点，这个东西是什么？z-index其实是css中的一个普通属性，主要用于设置元素的堆叠顺序，直白点就是你的网页如果有三个div重合在一起，需要按照一定顺序从底层显示到最上层，你该怎么办，因为在一般的网页开发中我们是二维的，css引入这个属性也是为了帮助我们更好的布局。

其次我们开始看看这个东西怎么用，下面我先给大家引入一些概念性的东西：

1.z-indeex属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素前面

2.对于同级元素，默认或position:STATIC情况下文档流后面的元素会覆盖前面的

3.对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，及z-index越大优先级越高

4.ie6/7下position不为static,且z-index不存在是z-index为0，除此之外的浏览器z-index为auto;

5.z-index为auto的元素不参与层级关系的比较，由向上遍历至此z-index不为auto的元素来参与比较

注意：如果你设置了position:static和不设置position的元素是一样的，对堆叠层级没有影响（后面例子便不再说明了，后面的position默认无static的情况）

下面我以几个实例来说明：

1.没有z-index和 position参与时元素的堆叠顺序：

<div id="div1"></div>

<div id="div2"></div>

上面两个div的堆叠法则就是后面的堆叠层级是比前面高的，就是说如果你用负margin将div2移到div1上，重合的部分是显示的 div2而不是div1。然后有同学就会问了，那我在div2后面再加一个div3呢，这时不管你后面还有多少个div，层级都和div2相同，不会再比div2高了

2.在有position参与但无z-index参与的情况

eg：

<style type="text/css">
    /*定位规则,如果加position堆叠顺序优先，所以A此时变在B上面*/
    #a,#b{
        width:100px;
        height:100px;
        background-color:red;
    }
    #b{
        background-color:green;
        margin-top:-20px;
        margin-left:20px;
    }
    #a{
        position:relative;
    }

</style>
<body>
<div id="a">
    我是A
</div>
<div id="b">
    我是B
</div>
</body>
然后你看到的是这样的情况：

这说明啥呢，虽然b元素在a的后面，但是a加了position之后，他的堆叠层级就变高了，跑到了b的上面
，所以我们利用这个规则在无z-index参与的情况下也可以实现三层堆叠，比如这样：
 <style type="text/css">
        /*定位规则,在没有z-index干扰的情况下也可以三个div也可以做出堆叠效果哦*/
        #a,#b{
            width:100px;
            height:100px;
            background-color:red;
        }
        #b{
            background-color:green;
            margin-top:-20px;
            margin-left:20px;
        }
        #a_1{
            width:50px;
            height:50px;
            background-color:blue;
            position:relative;
            left:80px;
            top:50px;
        }

    </style>
</head>
<body>
<div id="a">
    我是A
    <div id="a_1">
        我是A的子DIV
    </div>
</div>
<div id="b">
    我是B
</div>
</body>

3.有z-index参与的情况：
1.简单的堆叠：
#div1{
position:relative;
z-index:1;
}
#div2{
position:relative;

}
#div3{
position:relative;
z-index:0;
}
<div id="div1"></div>
<div id="div2"><//div>
<div id="div3"></div>
此时的层级顺序是，div1在最顶层，div2和div3均在第二层也就是最后一层。需要大家注意的一点，在position有值时，设置z-index为0和不设z-index是一样的。

2.相对复杂的堆叠（z-index的从父原则）：
   意思就是子元素首先要看看父元素有无z-index，就像最开始的例子，当两个父元素div1的z-index为1,div2的z-index为0时，div1的所有的子元素及自己的层级就会比div2及其子元素高，这也解释了为什么div2_1的z-index值设为999了都还是在div1的下面。讲到这，上述例子还有一个问题，div1_1我都设了z-index为-100了，为什么还是比div1高呢。有些同学会想，我就是想让背景黑色div1_1在父元素div1的下边怎么办呢，所以这里还有一个原则：当父元素有设置z-index时，那么他的子元素的层级一定会比他高，所以如果你想让一个子元素的层级在父元素之下，你一直设置子元素的z-index，都设置成了z-index 1000了都，没有效果，那么不妨看看父元素是否也被设置了z-index吧！

最后再强调一下：z-index是允许为负的 ,其次z-index的值应该是一个整数，不带px，很多新手写宽高写惯了，顺便就把z-index的值带了px.其次，在使用z-index的时候，一定要配合position使用，不管这个position 的值时fixed,absolute还是relative，但在值为static和不设position的层级是一致的。

总结一下，上面的例子好像很乱，实际情况真的不知道怎么使用才好。个人经验来看，首先看有无position，无position按先后顺序来看层级。有position，再看看是否有z-index，在父元素的子元素设置z-index的值时，一定要注意父元素是否设置了z-index，因为父元素会影响子元素的层级，这一点很重要，也是我们最最经常犯的错误。如果当你一个元素的z-index值设置最大或最小都没有效果时，不妨看看这是否你对z-index的从父原则没有理解透彻吧!最后再说点和本文无关的，css样式有很多属性都具有继承性，比如color,我们需要对其慢慢的了解，建议有时间大家可以去看看有关于css继承性方面的知识。

												


											
你所不知道的z-index的用法的更多相关文章
	

    
						
  1. 你所不知道的 CSS 阴影技巧与细节  滚动视差？CSS 不在话下  神奇的选择器 :focus-within  当角色转换为面试官之后  NPOI 教程 - 3.2 打印相关设置  前端XSS相关整理  委托入门案例
		
    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...
    
		
    2. 
						
  2. 你所不知道的setInterval
		
    在你所不知道的setTimeout记载了下setTimeout相关,此篇则整理了下setInterval:作为拥有广泛应用场景(定时器,轮播图,动画效果,自动滚动等等),而又充满各种不确定性的这set ...
    
		
    3. 
						
  3. 你所不知道的setTimeout
		
    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务.初始接触它的人都觉得好简单 ...
    
		
    4. 
						
  4. 你所不知道的linq(二)
		
    上一篇说了from in select的本质,具体参见你所不知道的linq.本篇说下from...in... from... in... select 首先上一段代码,猜猜结果是什么? class P ...
    
		
    5. 
						
  5. 你所不知道的html5与html中的那些事第三篇
		
    文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...
    
		
    6. 
						
  6. 你所不知道的Html5那些事(一)
		
    文章简介:       关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后 ...
    
		
    7. 
						
  7. 你所不知道的 CSS 滤镜技巧与细节
		
    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...
    
		
    8. 
						
  8. JavaScript中你所不知道的Object（二）--Function篇
		
    上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.Str ...
    
		
    9. 
						
  9. 你所不知道的 CSS 阴影技巧与细节
		
    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...
    
		
    10. 
						
  10. Android Context完全解析，你所不知道的Context的各种细节
		
    Context相信所有的Android开发人员基本上每天都在接触,因为它太常见了.但是这并不代表Context没有什么东西好讲的,实际上Context有太多小的细节并不被大家所关注,那么今天我们就来学 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. POJ   Wormholes  （SPFA）
			
    http://poj.org/problem?id=3259 Description While exploring his many farms, Farmer John has discovere ...
    
			
    2. 
						
  2. Educational Codeforces Round 1(D. Igor In the Museum) (BFS+离线访问)
			
    题目链接:http://codeforces.com/problemset/problem/598/D 题意是 给你一张行为n宽为m的图 k个询问点 ,求每个寻问点所在的封闭的一个上下左右连接的块所能 ...
    
			
    3. 
						
  3. plsql developer导入导出数据库方法
			
    导出步骤: 1 tools ->export user object 选择选项,导出.sql文件 2 tools ->export tables-> Oracle Export 选择 ...
    
			
    4. 
						
  4. MVC 中WebViewPage的运用
			
    MVC在View的最后处理中是将View的文件页面编译成一个类,这个类必须继承自WebViewPage,WebViewPage默认添加对AjaxHelper和HtmlHelper的支持 public  ...
    
			
    5. 
						
  5. 教你50招提升ASP.NET性能（十八）：在处理网站性能问题前，首先验证问题是否出在客户端
			
    (29)Before tackling any website performance issue, first verify the problem isn’t on the client 招数29 ...
    
			
    6. 
						
  6. Codeforces GYM 100114 C. Sequence 打表
			
    C. Sequence Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100114 Description ...
    
			
    7. 
						
  7. -_-#【JS】defer / async
			
    引用JavaScript文件时的两个属性defer和async <script src="js1.js" defer></script> <scrip ...
    
			
    8. 
						
  8. [Ramada] Build a Functional Pipeline with Ramda.js
			
    We'll learn how to take advantage of Ramda's automatic function currying and data-last argument orde ...
    
			
    9. 
						
  9. JAVA(2)——JDBC
			
    刚接触JDBC的时候,有时候就在想,为什么java要用JDBC,而不是直接使用之前在VB中就学习过的ODBC,由于ODBC是在JDBC之前出现,所以ODBC肯定由于无法完毕某些操作或者不能非常顺利的完 ...
    
			
    10. 
						
  10. mybatis0211   mybatis和spring整合
			
    1mybatis和spring整合 1.1 mybaits和spring整合的思路 .让spring管理SqlSessionFactory .让spring管理mapper动态代理对象和dao. 使用 ...
    
			
    11.