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