前言
这个问题可能比较奇怪，干嘛要让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元素也只会在这个宽度内生效了。
