什么是堆疊上下文？

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