不起眼的 z-index 却能牵扯出这么大的学问
z-index在日常开发中算是一个比较常用的样式，一般理解就是设置标签在z轴先后顺序，z-index值大的显示在最前面，小的则会被遮挡，是的，z-index的实际作用就是这样。
但是你真的了解z-index吗？你知道它有什么特性吗？这里先抛出几个名词：“层叠顺序（stacking order）”，“层叠上下文（stacking context）”，“层叠水平（stacking level）”。
先说一下z-index的基本用法：
z-index可以设置成三个值：
auto，默认值。当设置为auto的时候，当前元素的层叠级数是0，同时这个盒不会创建新的层级上下文（除非是根元素，即<html>）；<integer>。指示层叠级数，可以使负值，同时无论是什么值，都会创建一个新的层叠上下文；inherit。父元素继承
z-index只在定位元素中起作用，举栗子：
<style>
#box1{
background: blue;
width: 200px;
height: 200px;
}
#box2{
background: yellow;
width: 200px;
height: 200px;
margin-top:-100px;
} </style>
<div id="box1"></div>
<div id="box2"></div>
我们希望box1要显示在box2上面，可能这时候有同学会说，给box1加一个z-index大于0的值就可以了，这样是不对的，如图:
box2遮挡了box1，即使box1设置z-index值再大也白搭，前面说了z-index只在定位元素（position=static除外，因为元素默认就是static，相当于没用position样式）中作用，也是就z-index要配合position一起使用。感兴趣的可以亲自验证一下，这里只抛砖引玉。
层叠顺序对绝对元素的Z轴顺序
层叠顺序其实不是z-index独有的，每个元素都有层叠顺序，元素渲染的先后顺序跟它有很大关系，总之当元素发生层叠时，元素的层级高的会优先显示在上面，层级一样的则会根据dom的先后顺序进行渲染，后面的会覆盖前面的。文字再多可能也没有一张图来的直接，下面这张图是“七阶层叠水平”（网上盗的，很经典的一张图）
再举个栗子，这里还是拿刚才那个栗子来说，在不用z-index的前提下，利用css层叠顺序解决遮挡问题，代码修改如下
<style>
#box1{
background: blue;
width: 200px;
height: 200px;
display:inline-block;
}
#box2{
background: yellow;
width: 200px;
height: 200px;
margin-top:-100px;
} </style>
<div id="box1"></div>
<div id="box2"></div>
这里只做了细微的修改，就是给box1加了一个display:inline-block;的样式，这里解释一下，首先box1和box2发生了层叠，然后box默认为块级元素，即display：block，从七阶图中看出，display：block的元素的层叠水平低于display：inline-block的元素，所以浏览器就将box2渲染到box1上面，如图：
灵活的运用七阶图可以让你的代码尽可能的减少z-index的使用。因为多个人开发同一个系统，如果过多的用z-index，很有可能会出现冲突，即遮挡问题，一般来说z-index使用10以内的数值就足够了。
重点：层叠上下文
先说一下如果创建层叠上下文，css创建层叠上下文的方法有很多，但是常用的也就够那么几种
1、定位元素中z-index不等于auto的会为该元素创建层叠上下文
2、html根元素默认会创建层叠上下文（这是一个特例，知道就行）
3、元素的opacity不等于1会创建层叠上下文
4、元素的transform不等于none会创建层叠上下文
还有其它方式创建层叠上下文，这里就不做介绍了，上面四中是开发中常用到的。
那么知道怎么创建层叠上下文之后，问题的关键来了，层叠上下文有什么用呢？
这里一定要结合前面那张七阶图，最下面那一层background便是是建立在层叠上下文的基础上的，也就是说在层叠上下文中，所有的元素都会渲染在该元素的层叠上下文背景和边框上面；在block盒子、float盒子等不存在层级上下文的元素中，子元素设置z-index为负值的时候，那么子元素会被父元素遮挡。说了可能不太好理解，举个栗子消化一下：
<style>
#box1{
position: relative;
width: 200px;
height: 200px;
background: blue;
}
#box2{
position: relative;
z-index:-1;
width: 100px;
height: 100px;
background: yellow;
}
</style> <div id="box1">
<div id="box2"></div>
</div>
这里，box1并没有创建层叠上下文，它的子元素box2所在的层叠上下文还是根元素。这里box2设置z-index:-1，box1的z-index:auto，因为box1和box2在同一个层叠上下文中，根据七阶图可以看出，box2的层叠水平小于box1，所以box1会绘制在box2上面。如图所示：
那么怎么解决这个问题呢？相信大家已经知道这里该怎么处理了吧，是的，为box1建立一个层叠上下文，那么box2中的元素无论z-index是负的多少，都会显示在box1的背景之上，如图：
这里我用了前面说的的第一种方式去创建层叠上下文，即定位元素中z-index不为auto的元素会建立层叠上下文，可能有的同学开始纳闷了，box1的z-index大于box2的z-index，为什么box2缺显示在box1的上面呢？呵呵，这正对应了七阶图的层叠水平的关系，不明白的再仔细揣摩一下七阶图。
· 层叠水平仅在直接父级层叠上下文中进行比较，即层叠上下文A中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较。举个例子
<style>
#box1{
z-index: 10;
position: relative;
width: 200px;
height: 200px;
background: green;
}
#box1_1{
position: relative;
z-index: 100;
width: 100px;
height: 100px;
background: blue;
}
#box2{
position: relative;
z-index: 11;
width: 200px;
height: 200px;
background: red;
margin-top: -150px;
}
</style> <div id="box1">
<div id="box1_1">
</div>
</div> <div id="box2"> </div>
层叠上下文box1中的子元素box1_1设置z-index为100，而层叠上下文box2的z-index只有11，而实际的渲染效果却是，box2在box1和box1_1的上面，这就应了上面那就话，层叠水平仅在元素的第一个父级层叠上下文中进行，即层叠上下文A中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较，也就是活box1_1的z-index对于他的父级层叠上下文之外的元素没有任何影响。这里box2和box1在同一个层叠上下文中（html根元素会默认创建层叠上下文），所以它们两个会进行层叠水平的比较，box2的z-index大于box1的z-index，所以我们看到的也就是下面这样，box2遮挡了box1，不在乎box1中的子元素z-index是多少，如图：
这里我对z-index的理解也就讲述完毕了，大概就说了以下这几点内容：
1、z-index仅在定位元素（position不等于static）中有效
2、七阶层叠水平图
3、z-index层叠水平的比较仅限于父级层叠上下文中
其次需要注意以下几点：
1、在开发中尽量避免层叠上下文的多层嵌套，因为层叠上下文嵌套过多的话容易产生混乱，如果对层叠上下文理解不够的话是不好把控的。
2、非浮层元素（对话框等）尽量不要用z-index（通过层叠顺序或者dom顺序或者通过层叠上下文进行处理）
3、z-index设置数值时尽量用个位数
用了一晚上的时间整理了这篇文章，就连我自己对z-index也有了更加深刻的理解，希望对你也有帮助。如有错误 欢迎指正
不起眼的 z-index 却能牵扯出这么大的学问的更多相关文章
- 不起眼的 z-index 却能牵扯出这么大的学问（转）
z-index在日常开发中算是一个比较常用的样式,一般理解就是设置标签在z轴先后顺序,z-index值大的显示在最前面,小的则会被遮挡,是的,z-index的实际作用就是这样. 但是你真的了解z-in ...
- JS函数 编程练习 使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。
编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...
- 练习2：雨淋湿了一道题，9个数字只能看清楚4个，第一个肯定不是1 [X * (Y3 + Z)]^2 = 8MN9，求出各个数字
题目上的X代表的未知数,不一定是同一个数字. 其实这道题,直接一推敲答案就出来了,首先,积德尾数是9,说明 X*(Y3 + Z)的值尾数是3,3的因子只有1和3,所以X只有1和3候选,但是题目说第一个 ...
- tornado解决高并发的初步认识牵扯出的一些问题
#!/bin/env python # -*- coding:utf-8 -*- import tornado.httpserver import tornado.ioloop import torn ...
- Oracle数据库搬家牵扯出的一些知识点记录
Oracle数据库迁移过程中的一些记录 工作原因,对开发服务器的数据库进行了迁移,实际执行操作之前查了一下迁移oracle数据库的可行方案,最后用了 exp/imp 进行导出导入(这个比较简单),以及 ...
- jQuery弹出美女大图片
效果:http://hovertree.com/texiao/jqimg/2/ 效果图: 下载:http://hovertree.com/h/bjaf/jdaqepet.htm HTML代码: < ...
- DPDK无法分出连续大页面(contiguous hugepages)的几个解决方法
在使用DPDK或者SPDK的时候,需要在进程刚启动的时候使用rte_eal_init初始化Environment Abstract Layer,应用进程会通过这个函数告诉EAL为它映射多大的hugep ...
- 函数内this指向+排序+找出数组大小项+Math类
解决函数内this指向: 1,可以在函数外提前声明变量 _this/that = this 2,通过apply()和call()来修改函数内的this指向 二者区别: 用法是一样的,参数形式不一样 f ...
- 熬夜肝出5大点，18张图带你彻底弄懂MySQL事务日志
在当今社会,充斥着大量的数据.从众多APP上的账户资料到银行信用体系等个人档案,都离不开对大量数据的组织.存储和管理.而这,便是数据库存在的目的和价值.目前数据库的类型主要分为两种,一种是关系型数据库 ...
随机推荐
- eclipse+android+opencv环境搭建的步骤
---恢复内容开始--- 2016年4月12日编写 一.第一步:搭建eclipse开发环境 1.在eclipse官网中下载eclipse.zip进行解压即可.没有版本要求,但要和电脑的位数相匹配.如: ...
- LR12.53—第4课：准备Vuser脚本进行负载测试
第4课:准备Vuser脚本进行负载测试 在前面的课程中,您确认您的Vuser脚本的回放产生了真正的用户的精确仿真.下一个步骤是准备的脚本负载测试.如何将多用户系统同时工作的工作?会拖慢系统到不可接受的 ...
- 正则表达式test验证的“bug”
在使用正则表达式对某些字符串进行验证时,我们常常会使用到test方法,而该方法也隐藏着一个陷阱,今天就让我们来看一下这个问题. var str = 'hello jack, hello rose'; ...
- 在sql server使用链接服务器中访问mysql
----创建ODBC链接EXEC sp_addlinkedserver @server = 'MySQL', @srvproduct='MySql' , @provider = 'MSDASQL', ...
- tp中session用来做权限方法 （缓解mysql压力）
http://www.thinkphp.cn/code/2617.html
- python之GUI编程（二）win10 64位 pygame的安装
pygame的下载网址: http://www.pygame.org/download.shtml 我下载了第一个 很显然,安装的时候出现了如图中的尴尬,更改了安装目录后,在Python shell中 ...
- 怎么解决svn清理失败且路径显示乱码问题
http://jingyan.baidu.com/article/295430f1d728830c7e0050f9.html 上面这个网址是百度经验给的方法,我也是参照这个方式解决了问题,虽然是解决了 ...
- python 常用高效代码写法集锦
一.打开文件 #使用 with 语句操作文件对象 with open(r'somefileName') as somefile: for line in somefile: print line # ...
- 关于subGradent descent和Proximal gradient descent的迭代速度
clc;clear; D=1000;N=10000;thre=10e-8;zeroRatio=0.6; X = randn(N,D); r=rand(1,D); r=sign(1-2*r).*(2+2 ...
- Centos下安装Mongodb
转自:http://nnzhp.cn/article/10/ Mongodb是一种nosql类型的数据库,高性能.易部署.易使用的特点在IT行业非常流行. 下面介绍一下mongodb的安装方式,这里我 ...