z-index 层叠上下文的关系

2.背景介绍

z-index是什么？

w3school给出的定义是： z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

---

2.知识剖析

看上面这段文字我相信一定会被绕晕，现在把这段话的几个重要点跳出来一个个讲，

• 通常x轴和y轴是用来表示二维空间的水平位置和垂直位置；就好像是一张纸，只能在纸上移动！关键字，平面， demo（ps画图）
• 然而Z轴呢，就是三维的一个概念，现在我们把网页看成电脑屏幕，但是不要把电脑屏幕看成单一的一块玻璃，筒子们，发挥你的想象，这个屏幕是由一张张的玻璃堆叠起来的；z轴的作用就是让内容在这一堆玻璃（网页）上的哪一块玻璃上显示，内容越放在玻璃的下面，是不是离看起来离我们越远呢？反之，当我们把内容放在第一块玻璃上，是不是看起来离我们越近呢？那么在网页中怎么让内容放在我们想要的玻璃上呢，z-index就可以帮我们实现这个想法！现在站在上帝视角看来这一堆玻璃就是一个二维平面，假设现在有两个元素占了这个二维平面的一块共同的区域，z-index大的元素会掩盖z-index较小的元素（仅仅是相同的部分）demo1
• z-index有三种值，分别是auto自动，整数（正整数、0、负整数），inherit（继承）；
• z-index只能在定位元素上有效（如position:relative）；

z-index是怎么工作的

• 层叠次序    demo（stacking-order）

再次发挥想象，现在我们把html的背景颜色设置一个蓝色，然后在HTML里面设置一个宽高40px的div盒子，给盒子设置背景颜色为红色，现在我们打开网页看到的画面是什么呢？如果第一反应是屏幕上只有一片蓝的筒子，我觉得你可以回炉重造了，是嘛，一片蓝色上面还有还个红色的小方框对不对， 为什么这个红色的小方块会在背景上显示呢？这就引出了一个层叠次序的问题

这也就为什么设置了position没有设置index的元素会高于其他的元素

• 层叠上下文和层叠层

如果没有那几种方式创建出层叠上下文，那么大家都是老老实实的依照层叠次序的顺序来进行排列的，然而，总是有那么几个搞事的，z-index就是其中之一；

被z-index创建出来的层叠上下文有什么作用呢？它有着独立于页面上其他层叠上下文和层叠层的层叠层！这个需要结合那个七个方块的demo，最下面的background是建立在层叠上下文的基础上，也就是在层叠上下文中，所有的父元素会渲染在这个元素层叠上下文背景和边框上面；在block、float盒子等不存在层叠上下文的元素中，子元素设置z-index为负值的时候，那么子元素会被父元素遮挡

 假设我们现在要设置子元素的z-index=-1，但是又想让子元素在保持z-index值不变得情况下在父级的上方浮现，这时候应该怎么办呢？是的，为div1创建一个层叠上下文就行了，现在div2可以说事div1中所属的一个层叠层了，再次结合7阶图，不管这时候div2的z-index是负值还是正整数，它永远都会在div1的上方！

定位元素还会产生新的层叠上下文，而这整一个层叠层会显示在另一个层叠上下文中的所有层叠层的上面或者下面。

问题1：使用z-index有什么需要注意的地方？

1. 在开发中尽量避免层叠上下文的多层嵌套，因为层叠上下文嵌套过多的话容易产生混乱，如果对层叠上下文理解不够的话是不好把控的。
2. 非浮层元素（对话框等）尽量不要用z-index（通过层叠顺序或者dom顺序或者通过层叠上下文进行处理）
3. z-index设置数值时尽量用个位数
4. 让absolute元素覆盖正常文档流内元素（不用设z-index，自然覆盖）
5. 让后一个absolute元素覆盖前一个absolute元素（不用设z-index，只要在HTML端正确设置元素顺序即可）

问题2：什么情况下使用z-index？

1. 当absolute元素覆盖另一个absolute元素，且HTML端不方便调整DOM的先后顺序时，需要设置z-index: 1。非常少见的情况下多个absolute交错覆盖，或者需要显示最高层次的模态对话框时，可以设置z-index > 1。

问题3：使用z-index可以做些什么？如果用纯css写下面的页面，

CSS 气泡：

Z-index 属性还可以用来实现基于CSS的提示气泡，就像下面 trentrichardson.com 展示的那样