什么是堆叠上下文？
堆叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
以下12种情况可以产生堆叠上下文。
- 根元素 (HTML),
- z-index 值不为 "auto"的 绝对/相对定位，
- 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
- opacity 属性值小于 1 的元素（参考 the specification for opacity），
- transform 属性值不为 "none"的元素，
- mix-blend-mode 属性值不为 "normal"的元素，
- filter值不为“none”的元素，
- perspective值不为“none”的元素，
- isolation 属性被设置为 "isolate"的元素，
- position: fixed
- 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
- -webkit-overflow-scrolling 属性被设置 "touch"的元素
tips
- -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果，这样更自然，像是原生效果。
- touch 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。所以我们一般会在需要滚动的元素上面加：-webkit-overflow-scrolling: touch; 这个 css 属性。但是有当子元素有 fixed 定位时，fixed 定位会失效。
position:fixed为什么失效？
- 经过学习，发现position:fixed 和 absolute都可以失效，失效的原因是创建了堆叠上下文，该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport视口 定位，而是基于这个父元素。
- 排查了一下发现是页面中用了一个公司内部封装的scrollview组件中，有z-index 值不为 "auto"的 绝对/相对定位符合这条，于是弹窗弹起来的时候，将scrollview的父级div设置为position:visible,关闭再设为position：absolute
