我们先说说什么是上下文
上下文（Context）可以理解为程序执行的背景环境，包含了在特定时刻程序所需的所有信息，这些信息可以包括变量的值、函数的调用情况、执行的位置等。 那么css在设计的时候也不例外，CSS上下文是指一个元素及其内部元素如何相互影响的样式环境。
css中的层叠上下文
层叠上下文是HTML元素的三维概念，这些HTML元素在一个假象的相对于面向（电脑屏幕的）视窗或网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
意思就是如果两个元素重叠了，哪一个在上面的规则。
有哪些属性可以创建层叠上下文
- html 根元素
- position 为 absolue、relative,且z-index 不能为auto。
- position 为fixed、sticky。
- 一个 z-index 值不为 "auto" 的 flex 项(flex item)，即：父元素display: flex | inline-flex
- isolation 为isolate
- opacify 小于1
- transform 不为none
- mix-blend-mode 属性值不为"normal"的元素 这些都会创建一个层叠上下文。
层叠上下文都有哪些规则
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
- 元素比较是在同一个上下文中才有效。
