堆叠上下文

什么是堆叠上下文？

堆叠上下文是 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

1. -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果，这样更自然，像是原生效果。
2. touch 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。所以我们一般会在需要滚动的元素上面加：-webkit-overflow-scrolling: touch; 这个 css 属性。但是有当子元素有 fixed 定位时，fixed 定位会失效。

position:fixed为什么失效？

1. 经过学习，发现position:fixed 和 absolute都可以失效，失效的原因是创建了堆叠上下文，该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport视口 定位，而是基于这个父元素。
2. 排查了一下发现是页面中用了一个公司内部封装的scrollview组件中，有z-index 值不为 "auto"的 绝对/相对定位符合这条，于是弹窗弹起来的时候，将scrollview的父级div设置为position:visible,关闭再设为position：absolute