css笔记 - 张鑫旭css课程笔记之 z-index 篇
一、z-index语法、支持的属性值等
z-index：
在支持z-index的元素上，
z-index规定了元素（包括子元素）的垂直z方向的层级顺序，
z-index可以决定哪个元素覆盖在哪个元素上边。（这个学过ps的，想象一下图层的概念，z-index就像是调整图层的上下顺序。）
z-index在css2.1中需要和定位元素(position为relative、absolute、fixed、sticky等这些)配合使用才有作用。
属性值
z-index:auto; z-index:整数值;(支持负值和animation动画) z-index:inherit;
二、z-index与层级表现的几种情况：
1. 普通元素中不设置z-index的情况下：
如果 都没有设置 z-index层级，那么后边的元素覆盖前边的元素。即后来居上
如果z-index设置了 具体数值，那么数值大的覆盖数值小的。即谁大谁上
比如：a元素的z-index为2；b元素的z-index为1；b虽然在a后边，但是a覆盖b；
2. 定位元素的嵌套父元素设置了z-index的情况下：
a). 父元素z-index都设置具体数值时：
如果父元素有大有小，遵循 祖先优先原则，谁的父亲的z-index值大，谁在上边。
如果父元素一般大，那么遵循后来居上，谁的dom位置靠后谁的层级在上边。
比如：a元素的z-index为2；b元素的z-index为1；
因为b在a后边，即使a和b的父元素z-index都为1。b的父元素也比a的父元素高。
同样如果a的父元素为2，b的父元素为1，那么即使b在a后边，a的父元素也比b的父元素高。
b). 父元素z-index都设置auto时：
父元素和没设置一样，没有祖先优先原则，还是遵循类似普通元素的那两条，后来居上和谁大谁上。
c).其中一个为auto，另一个为具体数值时：
c-1). ie8及现代浏览器 的表现是，为auto的父元素z-index值不起作用，其 子元素的z-index值和不为auto的另一个父元素比较 层级，谁大谁上。
还是比如a和b，a的z-index值为3，父元素z-index值为auto。
b和其父元素的z-index值都为1，即使b在a后边，即使a的父元素z-index：auto；比b的父元素小，
但是a的z-index值比b的父元素还大，所以a在上边。
原因：z-index:auto;生成盒子层叠水平是0，盒子不会创建一个新的层叠上下文（ie8及现代浏览器）。
回归案例，也就是说当a的父元素z-index为auto时，根本没有生成层叠上下文，父元素根本没有出来应战，只能子元素硬着头皮和别人的爹pk。
不过还是自古英雄出少年，只要子元素的z-index值大，管他是谁的父元素都能打赢。
c-2).ie6、7 中，因为z-index:auto也会触发层叠上下文，所以也遵循后来居上原则。
三、 z-index新建层叠上下文
当z-index为数值的时候，就会新建层叠上下文。
三条原则：
在所有浏览器中，只要z-index为数值，就会创建层叠上下文。
当z-index为auto时，不会触发新建层叠上下文。z-index：auto;相当于z-index:0;的效果。（ie6、7除外：ie6、7中就算z-index为auto，也会创建层叠上下文。）
在ie6、7中，只要有z-index就会创建层叠上下文。（这是一个bug）
四、层叠上下文和层叠水平
层叠上下文（stacking context）
即，在z轴上被提升(或降低)了层级的元素。
他是html元素中的一个三维概念，表示元素在z轴上的层级。
在html里边，具有层叠上下文的元素有：
1. 页面的额根元素天生自带层叠上下文。被称为“根层叠上下文”
2. 设置了z-index：任意数值；的定位元素也具有层叠上下文。
3. 其他
层叠水平（stacking level）
层叠上下文的每个元素都有一个层叠水平，层叠水平决定了同一个层叠上下文中，元素在z轴上的显示循序，遮盖原则。
具体原则是：
后来居上： 层叠水平一致时，dom结构在后边的覆盖前边的。
谁大谁上： 层叠水平不一致时，谁的层叠水平值大谁在上边（就是比较z-index的数值谁大）
2018-09-05 13:48:54
版权声明：本文为padding1015原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。