不起眼的回形针,原来还有这几个厉害用途,花钱都难买到

z-index在日常开发中算是一个比较常用的样式，一般理解就是设置标签在z轴先后顺序，z-index值大的显示在最前面，小的则会被遮挡，是的，z-index的实际作用就是这样。
但是你真的了解z-index吗？你知道它有什么特性吗？这里先抛出几个名词：“层叠顺序（stacking order）”，“层叠上下文（stacking context）”，“层叠水平（stacking level）” 。
先说一下z-index的基本用法：
z-index可以设置成三个值：

auto，默认值。当设置为auto的时候，当前元素的层叠级数是0，同时这个盒不会创建新的层级上下文（除非是根元素，即）；

。指示层叠级数，可以使负值，同时无论是什么值，都会创建一个新的层叠上下文；

inherit 。父元素继承

z-index只在定位元素中起作用，举栗子：
#box1{ background: blue; width: 200px; height: 200px; } #box2{ background: yellow; width: 200px; height: 200px; margin-top:-100px; }我们希望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层叠顺序解决遮挡问题，代码修改如下
#box1{ background: blue; width: 200px; height: 200px; display:inline-block; } #box2{ background: yellow; width: 200px; height: 200px; margin-top:-100px; }这里只做了细微的修改，就是给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会创建层叠上下文
还有其它方式创建层叠上下文，这里就不做介绍了，上面四中是开发中常用到的。