今天给大家分享一下，z-index和层叠上下文如何形成的？
1.背景介绍
层叠上下文，就是在呈现的时候决定哪个元素在上、哪个元素在下，初学的时候觉得这东西应该就是跟z-index的大小有关，然而并没有这么简单，我们来感受下。
2.知识剖析
先了解一下z-index的基本信息：
在W3C是这样描述的：每个元素都具有三维空间位置，除了水平和垂直位置外，还能在 "Z轴" 上层层相叠、排列。元素在 "Z轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定。在文档中，每个元素仅属于一个层叠上下文。元素的层叠级别为整型，它描述了在相同层叠上下文中元素在 "Z轴" 上的呈现顺序。同一层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则，即其在HTML文档中的顺序。不同层叠上下文中，元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序，与自身的层叠级别无关。
z-index语法：
z-index: auto(自动，默认值) | integer(整数) | inherit (继承)
z-index 接受的属性值为：关键字auto和整数，整数可以是负值。
需要注意的是 z-index 虽然很给力，却只能应用于定位元素（即设置了 position 属性为非 static 值），其它情况下，z-index 将被忽略。
3.常见问题
处理两个或两个以上盒子之间z-index的复杂关系？
什么是层叠上下文（STACKING CONTENT）
在一个层叠上下文，所有的元素根据规则从下到上排列，分成了七个等级：
1、背景和边框 — 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。
2、负z-index值 — 层叠上下文内有着负z-index值的子元素。
3、块级盒 — 文档流中非行内非定位子元素。
4、浮动盒 — 非定位浮动元素。
5、行内盒 — 文档流中行内级别非定位子元素。
6、z-index: 0 — 定位元素。这些元素形成了新的层叠上下文。
7、正z-index值 — 定位元素。层叠上下文中的最高等级
层叠上下文是具有包含关系的，同时又各自应用层叠规则而互不影响，也就是说一个层叠上下文中有一个z-index值很大的定位元素，它依然会处于层叠等级高于创建该层叠上下文元素的元素的下方。
4.解决方案
1,如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
2,如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素
3,如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，在父元素上方
4,如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效
5,如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定
5.编码实战
上面
6.扩展思考
问题：为什么内联元素的层叠顺序要比块状元素高？
内联元素一般都是基于语义级(semantic)的基本元素，它只能容纳文本或者其他内联元素，通常被包括在块元素中使用，常见内联元素有“a、b、br”等,基本上可以说成内联元素变成了块状元素的子元素，所以子元素也就是内联元素要高于块状元素。
1.行内块的级别比块级元素的层级高，行内块能覆盖块
2.z-index不能和和folat一起使用，因为他的层级已经规定在z-index：0；和z-index负数之间
2..z-index不能和和folat folat在z-index负数 和z-index为0 之间
7.参考文献
链接：http://www.jianshu.com/p/226c585c0cd0
W3C：http://www.w3school.com.cn/cssref/pr_pos_z-index.asp
关于z-index那些你不知道的事：https://webdesign.tutsplus.com/zh-hans/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892
Stacking Content层叠上下文：https://leozdgao.me/stacking-content-basic/
网友评论