fixed不生效问题

(1)需求：

上周做一个面板弹出一个遮罩层，遮罩层需要覆盖全屏，用了position:fixed,竟然不生效;

因为fixed定位是针对浏览器的可视窗口，但是我发现弹出的遮罩层竟然是以面板为父亲，而不是浏览器，这样就达不到遮罩的目的，fixed不生效了；

(2)疑问？难道fixed另有隐情？

百度发现有如果父元素

1）存在transfrom、perspective属性且值不为none
2）存在will-change且值为transform或者perspective
3）存在filter且值不为none
4）存在contain且值为paint 子元素会失效

翻找发现父元素果然存在

backdrop-filter: var(--aero,blur(25px));

解决办法：将弹窗放到外层来，这样父元素只会是body

document.body.append(this.$refs['父元素'])

(3)原因：产生堆叠上下文

什么是堆叠上下文呢？
官网解释：堆叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
通俗的讲：堆叠上下文就是以三维坐标，垂直眼睛为Z轴，一层一层往上堆叠，同理，就跟盖棉被似的，一层一层往上盖，层级最高盖在最上层；

(4)总结：

那为什么父亲设置transform，子元素设置fixed会不生效呢？
由于新增的css3最新特性中transform，filter等可以产生堆叠上下文，产生之后，子元素想要挣脱父亲出去另立门户，肯定是不允许的，你必须乖乖待在家里，那怎么解决呢？就是摆脱父亲单飞！另起炉灶！