深入理解之z-index属性（第四期）

一、z-index基础

1. 支持负值（在日常的使用的层叠上下文里，-1，-2值足够使用）
2. 支持css3animation动画。
3. 如果不考虑css3只有 定位元素的index才有作用：position、relative、absolute、fixed。

二、相关特性

1. 如果定位元素z-index没有发生嵌套。

• 后来居上原则
• 哪个值大哪个值就在上面

2. 如果定位元素z-index发生了嵌套

• 祖先优先原则
  例：虽然前面的z-index更大，但是需要追溯到祖先元素来比较，即：外层的div。两个div的z-index都是1，所以后来居上原则，第二个图片在上面。

<div style="position:relative;z-index:1;">
	<img style="position:absolute;z-index=2;"/>//前提:z-index是数值不是auto
</div>
<div style="position:relative;z-index:1;">
	<img style="position:absolute;z-index=1;"/> 
</div>

三、理解css中的层叠上下文和层叠水平

1. 层叠上下文，是html元素中一个三维概念，表示元素在z轴上有了可以"高人一等的权利"（可以理解为：表示普通的老百姓htlm元素当官了有了等级）。

• 页面的根元素天生是具有层叠上下的：“根层的叠上下文”（皇亲国戚）。
• z-index的值为数值的定位元素有层叠上下文（科考入选）。
• 其它属性。

2. 层叠水平：层叠上下文中的每个元素都有层叠水平，决定了捅一个层叠上下文元素在Z轴上的显示顺序，遵循“后来居上”和"谁大谁在上"的准则（当官的家人论资排辈）。
3. 特征如下

• 层叠上下文可以嵌套，组成一个分成的层叠上下文
• 每个层叠上下文和兄弟元素可以独立：当进行层叠化渲染的时候只需要考虑后代元素。
• 每个层叠上下文是只成体系的：当元素的内容被层叠否，整个元素被认为是在父成的层叠顺序中（子元素发生了层叠变动不会影响到父元素的情况）。

四、理解元素的层叠顺序

五、z-index与层叠上下文

1. 定位元素默认z-index：auto;可以看成z-index：0;。
2. z-index不为auto的定位元素会创建层叠上下文。
3. z-index层叠顺序的比较止步于父级层叠上下文。

六、css与层叠上下文的属性

1. z-index不为auto的flex项（父元素display:flex/inline-flex）。
2. 元素的opacity的值不为1.
3. transition的值不为none。
4. mix-blend-mode值不为normall。
5. filter的值不为none。
6. position:fixed声明存在。
7. will-change指定的属性值为上面任意一个。
8. overflow-scrolling为touch。

七、z-index与其它css属性层叠上下文

1. 不支持z-index的层叠上下文元素的层叠顺序均是z-index：auto；
2. 依赖z-index的层叠上下文元素的层叠顺序取决于z-index的值。

后排提示：之前在慕课看到了这个系列的教程，来自于张鑫旭老师，有兴趣的朋友可以搜索看看，本人在此做一个学习记录。