不起眼的 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上的账户资料到银行信用体系等个人档案,都离不开对大量数据的组织.存储和管理.而这,便是数据库存在的目的和价值.目前数据库的类型主要分为两种,一种是关系型数据库 ...
随机推荐
- git 使用入门
参考教程: 廖雪峰的官方网站 MY UBUNTU 安装: sudo apt-get install git GIT 理解: 选定的目录为git的工作区.该目录下的任何改动,git都会记录为工作区的修改 ...
- Sequelize 关系模型简介
Sequelize 关系模型简介 先介绍一下本文用到的术语: 源: 调用 sequelize 中关系方法的调用者 目标: 调用 sequelize 中关系方法中的参数 比如, User.hasOne( ...
- jquery操作复选框(checkbox)的12个小技巧总结
1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']: ...
- 26. linux查看端口占用情况
linux系统下,查看端口占用情况的命令:lsof -i[root@www ~]# lsof -i
- C#小写数字金额转换成大写人民币金额的算法
C#小写数字金额转换成大写人民币金额的算法 第一种方法: using System.Text.RegularExpressions;//首先引入命名空间 private string DaXie(st ...
- CentOS安装squid代理服务器
Squid是一个Linux系统下优秀的代理服务器软件.Squid可以配置普通上网代理(正向代理).反向代理.透明代理.系统是CentOS6.2.Squid主机IP为192.168.1.100. 安装s ...
- Google Protocol Buffer 的使用
简介 Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 48,162 种报文格式定义和超过 12,183 ...
- 解决Bringing up interface eth0: Device eth0 does not seem to be present, delaying initialization.
一.问题描述 OS:centos 原因是拷贝虚拟机造成的. 使用vmworkstation打开虚拟机的时候,要选择copy而非move. 二.解决描述 网络上解决步骤各异,其实就一句话.只要保证vmw ...
- AIX 环境下ODM库同步
IBM AIX v5.3操作系统环境下有时会出现ODM库与rootvg硬盘上数据不同步的情况.使用命令lsvg -l datavg检查文件系统类型,发现显示为"???"这就表示OD ...
- LoadRunner ---参数化数据源（oracle，mssql，excel）
TXT文本,EXCEL表格以及数据库中的表都可以作为参数的数据集载体,LR都是支持的. 特别提醒:1.在形成数据池之后,数据库中的数据变化不会影响数据池中的数据.2.数据文件一定要以一个空行结束,否则 ...