后台最近遇到一个问题，在使用ReactDrawer抽屉时，抽屉中的position:fixed似乎不是基于可见窗口定位，而是基于抽屉定位。我对这个设定很好奇，所以就根据这个内容进行了一些探索。ReactDrawer的探索过程被实现为transform。当position:fixed的祖先元素为transform时，定位容器从视口变为祖先。不仅position:fixed在transform中无效，position:fixed在所有层叠上下文（StackingContext）中也是无效的。【MDN理论】并不是所有position:fixed下的堆叠上下文（StackingContext）都无效，只存在于：transform属性值不为none且perspective值不为none的元素elementwill-change指定任何CSS属性filternotnone具有transform的元素-style:preserve-3d在不同的浏览器中表现不同。以上五种情况仅在Chrome中体现了这一特性。StackingContext__StackingContext__：堆叠上下文是HTML元素的三维概念，它相对于用户面对的（计算机屏幕）窗口或网页沿着一个假想的z轴延伸，HTML元素占据了堆叠上下文中的空间根据自身属性优先排序。如何创建堆叠上下文：z-index值不是“auto”的根元素（HTML）的绝对/相对定位，z-index值不是“auto”的弹性项（flexitem），即：parent元素展示：flex|inline-flex，opacity属性值小于1的元素（opacity参考规范），transform属性值不为"none"的元素，mix-blend-mode属性值不为"的元素normal”，过滤值不为“none”的元素，透视值不为“none”的元素，isolation属性设置为“isolate”的元素，position:fixed在will-change中指定任何CSS属性，即使你不要直接指定这些属性的值-webkit-overflow-scrolling属性设置为“touch”元素结论Chrome中的问题结论：在Chrome（Blink内核）中，position:fixed位于：transform属性值不是的祖先元素none且透视值不为none如果在t中指定了任何CSS过滤器elementwill-changeandtransform-style:preserve-3d没有设置为none，定位容器由视口改为祖先。不同浏览器position:fixed性能：CSSChromeSafari(Mac)FireFoxz-index值不为“auto”且opacity属性值小于1的flexitem的绝对/相对定位transform属性值不为“none”的元素是invalidated是无效的mix-blend-mode属性值不是“normal”的元素是无效的元素其过滤值不是“none”是无效的元素其透视值不是“none”是无效的invalidateisolation属性设置为“的元素isolate"position:fixed禁用will-change中指定的任何CSS属性。属性设置为“触摸”的元素将被禁用。属性设置为transform-style:preserve-3d的元素被禁用。无效位置：固定不同性能（不同浏览器打开）DEMO
