前言

这个问题可能比较奇怪，干嘛要让position: fixed失效呢？

其实主要的场景是应用在移动端跟PC端兼容的问题上，在移动端，fixed根据浏览器窗口定位，这没问题，但是如果将页面用PC打开，想让页面以375px显示在屏幕中央，以便模拟手机体验，同时还想让position: fixed也只在375px内生效，这就有点意思了。

默认是办不到的，那么怎么办？

实现原理

MDN对position: fixed有一个注释：

当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

也就是说，只要给它的随便哪个祖先设上非none的transform，问题就解决了。这祖先可以是static的，也就是说随便哪个祖先都行。但是，由于要模拟手机体验，所以基于body元素比较妥。

比如说给body设一个transform: translateZ(0);，测试有效。

由于在PC环境下，我们通过媒体查询等手段限定了body的宽度，那么fixed元素也只会在这个宽度内生效了。