positon:fixed定位失效

positon:fixed---绝对定位

元素将相对于屏幕视口（viewport）的位置来指定其位置，并且元素的位置在屏幕滚动时不会改变。

fixed 属性会创建新的层叠上下文（Stacking Context）。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

Stacking Context---层叠上下文

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

如何触发一个元素形成层叠上下文？方法如下(参考MDN)：

• 根元素 (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"的元素
  
  

对于position:fixed定位失效的原因，可暂时归纳为:

• transform属性值不为none的元素
• 设置了 transform-style: preserve-3d 的元素
• perspective 值不为 none 的元素
• 在 will-change 中指定了任意 CSS 属性
  
  

position:fixed失效场景
position:sticky使用场景
待续…