1.最小化影响原则

2.不犯二准则

3.组件层级计数器

4.负值z-index与可访问性隐藏

css3属性

 1.

2.

3.

4.

5.

6.isolation：isolate 

7.

限于

8.

9.移动端特有

css3属性

 1.

2.

3.

4.

5.

6.isolation：isolate 独立

7.

限于

8.

9.移动端特有

css3属性

 1.

2.

3.

4.

5.

6.isolation：isolate 独立

7.

限于

8.

9.移动端特有

z-index：默认值auto

案例：

z-inde:auto不会创建层叠上下文，z-index:0会创建层叠上下文

层叠水平

更方便页面元素的加载和呈现

7阶层叠水平图

相关实践准则

其他属性关于层叠上下文

z-inde:auto不会创建层叠上下文，z-index:0会创建层叠上下文

定位元素默认z-index:auto可以看成是z-index:0

不为z-index不为auto的定位元素会层叠上下文

顺序比较止步于父级层叠上下文

意义：规范元素重叠时候的呈现规则。

为何：更符合页面加载和视觉呈现

七阶层叠水平

当两组元素发生嵌套关系时，前一个元素的父级设置 auto，可以避免祖先原则

如果定位元素z-index没有发生嵌套：

1.后来居上的准则，2.哪个大，哪个上

著名的7阶层叠水平

后来居上例子

层叠上下文的生成盒子层叠水平是0

祖先优先原则不起作用了？？！！！！

祖先优先例子

文字是内联水平

不依赖z-index的层叠上下文元素的层叠顺序（css属性的层叠上下文元素，遵循后来居上准则）和z-index：auto属于同一级别

依赖z-index的层叠上下文元素根据z-index值决定层叠顺序，若值相等，遵循‘’后来居上‘’

1. 定位元素默认z-index：auto可以看成z-index：0

2. z-index不为auto的定位元素会创建层叠上下文

3. z-index层叠顺序的比较止步于父级层叠上下文（若元素父级设置了层级，以父级的层叠大小为准）

   从层叠顺序上讲，z-index：auto可以看成z-index：0

   但从层叠上下文来讲，z-index：auto不会创建层叠上下文，z-index：0会创建层叠上下文
   

7阶层叠水平层叠顺序：

层叠上下文的background/dorder < 负z-index < block块状水平盒子< float浮动盒子 < inline/inline-block水平盒子 < z-index：auto或看成z-index：0 < 正z-index

 z-index只有与定位元素配合使用，如果定位元素设置了z-index并且发生覆盖关系遵循的原则：1.后来居上准则 2.z-index值大的在上；

如果定位元素发生了嵌套（里面有定位元素，外面也有定位元素）遵循“”祖先优先原则“”他的层级由最祖先的层级元素决定（前提：z-index是数值，不是auto）

通过JS代码获取body下子元素的最大z-index

非浮层元素z-index不应该超过2

不依赖z-index的层叠上下文与z-index：auto是一个层叠水平