前言
熟练掌握层叠上下文，对于前端布局极其重要。
层叠上下文
HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。个人理解为可以给元素添加的一个属性，下面会介绍如何添加层叠上下文这种属性。有层叠上下文属性的dom元素可以被称为一个层叠上下文（因为有当一个元素变成一个层叠上下文之后就与普通元素不一样了）。mdn层叠上下文
层叠水平
- 1、决定了同一个层叠上下文中元素在z轴上的显示顺序
- 2、层叠水平的比较只有在当前层叠上下文元素中才有意义。
层叠顺序
元素发生层叠时候有着特定的垂直显示顺序，（层叠上下文、层叠水平是概念，层叠顺序是规则）
层叠顺序
层叠顺序从上到下依次
- 1、正 z-index
- 2、z-index：auto或z-index：0
- 3、inline/inline-block 水平盒子
- 4、float 浮动元素
- 5、block 块状盒子
- 6、负z-index
- 7、background/border 解释： 1-3是内容，4-6是布局，7是装饰
层叠准则
1、谁大谁上：层叠水平大的覆盖层叠水平小的
2、后来居上：层叠水平相同情况下，DOM流中处于后面的元素会覆盖前面的元素
层叠上下文的特性
- 层叠上下文的层叠水平要比普通元素高；
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受限于外部的层叠上下文
- 层叠上下文和兄弟元素独立，也就是当今昔层叠变化或渲染的时候，只需要考虑后代元素
- 每个层叠上下文自成体系，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
层叠上下文的创建
1、根层叠上下文
指的是页面根元素，这也是为什么定位元素最后会相对于html元素定位
2、z-index 值为数值的定位元素的传统层叠上下文
定位元素本身不会生成层叠上下文，只有指定z-index为数值才会生成层叠上下文，z-index默认为auto不生成层叠上下文
3、CSS3与新时代的层叠上下文
以下每一项都会使dom元素变成层叠上下文。
- z-index值不为auto的flex项(父元素display:flex|inline-flex).
- 元素的opacity值不是1.
- 元素的transform值不是none.
- 元素mix-blend-mode值不是normal.
- 元素的filter值不是none.
- 元素的isolation值是isolate.
- will-change指定的属性值为上面任意一个。
- 元素的-webkit-overflow-scrolling设为touch.
结语，总结用，侵权删，摘自 www.zhangxinxu.com/wordpress/2…
