css层叠上下文
一、层叠上下文
- 上下文定义：
① 一个参与多方构建的，遵循一定规则的，独立的环境
②子项可能创建新的独立的环境，与外层的环境有同样的规则，可是却会和外层隔绝。
橙色的球里面有4个球，然后第4个球里面还包含了2个球，是独立的，与外层是隔离的。
- 先了解一下z-index属性
①z-index不设置的时候默认是auto，设置时只能取整数，如"1，2，-1，-2..."，z-index: 0; 和z-index: auto;会完全不一样。
②z表示垂直屏幕方向，也就是说z-index值越大离我们越近，反之则越远，
③z-index只对指定了position属性的元素有效。
④没有指定z-index时，所有元素都在默认层(0层)被渲染
⑤当多个元素的z-index属性相同时(在同一层里面），则按照正常文档流的顺序出现。
z-index的值距离用户的距离
- 层叠上下文定义:
①层叠上下文是HTML元素的三维概念，可以想象为一条垂直于视窗的z轴。
②当元素创建了重叠上下文时，就可以说这个元素有了一个z轴，
③内部的子元素发生重叠时，会依据自身属性优先级顺序占用z轴（重叠上下文）上的空间，
④优先级最大的元素排在最上面，离用户也最近。
层叠上下文是HTML元素的三维，除了有x轴和y轴，还有一个表示层叠的z轴。
内部的子元素发生重叠时，会依据自身属性优先级顺序占用z轴（重叠上下文）上的空间，优先级最大的元素排在最上面，离用户也最近。
- 层叠上下文形成的条件：
①根元素
②z-index不为auto的绝对定位和相对定位元素
③fixed定位元素和sticky定位元素
④z-index不为auto的flex item
⑤z-index不为auto的grid item
⑥opacity小于1的元素
⑦transform不为none的元素
- 层叠规则：
①属于同一层叠上下文的同级元素比较，
②当层叠上下文属于某一层级时，其内的层叠上下文度属于对应层级。
举例：
Root
- DIV #2 - z-index 是 2
- DIV #3 - z-index 是 3
- DIV #5 - z-index是1，因为父层叠上下文是4，所以自己是4.1
- DIV #6 - z-index是3，因为父层叠上下文是4，所以自己是4.3
- DIV #4 - z-index是6，因为父层叠上下文是4，所以自己是4.6
比较：
① #1 #2 #3在同一层叠上下文Root中，#1>#3>#2
② #5 #6 #4在同一层叠上下文#3中, #4>#6>#5
③ z-index:5>z-index:4同时z-index:5>z-index:4.6
- z-index举例测试
①没有设置z-index的层叠情况- 只有一个层叠上下文，只有html根元素，所以是按照DOM顺序排列，下面的元素越靠前(靠近观察者) 。
高→低顺序：box4>box3>box2>box1
②定位元素设置了z-index层叠情况
- box2和box4设置了z-index值，
-
在根元素里面，box1234是同级的，所以就比较z-index的值，z-index值越大越靠前，没有设置z-index值就按照DOM顺序。
高→低顺序：box4>box2>box3>box1
③box1234都设置了z-index值
-
创建了5个上下文: 根元素, box1, box2, box3, box4
-
根元素上下文包含box1和box3，box1包含box2, box3包含box4
-
box1和box3对比，box1的z-index值比box3要大，box1在box3前面；在box1上下文里面box2在box1前面、box3上下文里面box4在box3前面，所以box2>box1>box4>box3
高→低顺序：box2>box1>box4>box3
-
在根元素的上下文中，box5没有设置z-index值，所以是最下面
高→低顺序:box2>box1>box4>box3>box6>box5
- 层叠顺序总结
①没有设置z-index的场景，从低→高顺序
- 根元素的背景和边框
- 普通流(无定位)里的块元素(没有position或者position: static;)按照html中的出现顺序堆叠
-
定位元素按html中的出现顺序堆叠
高→低顺序：div4>div3>div2>div1>div5
②带浮动的场景，从低→高顺序
- 根元素的背景和边框
- 位于普通流中的后代块元素按照它们在html中出现的顺序层叠
- 浮动块元素
-
后代中的定位元素按照它们在html中出现的顺序层叠
从高→低顺序：div5-div1-di3-div2-div4
参考：饥人谷课件
