transform属性影响fixed定位

-----css部分-----
<style>
    *{
      padding: 0;
      margin: 0;
    }
    .transform{
      width: 100px;
      height: 100px;
      background: rgb(196, 196, 196);
      /* transform:translateY(20%) */
    }
    .fixed{
      position: fixed;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
      background: #000;
    }
  </style>
  
  -----html部分-----
  <div class="transform">
    <div class="fixed">fixed</div>
  </div>

正常固定在浏览器窗口左上角

当外部盒子设置transform

*{
      padding: 0;
      margin: 0;
    }
    .transform{
      margin: auto;
      width: 200px;
      height: 200px;
      background: rgb(196, 196, 196);
      transform:translateY(20%)
    }
    .fixed{
      position: fixed;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background: #000;
    }

神奇的事情发生了，fixed盒子被限制在了外部盒子体内，连同外部盒子一起向下偏移，只因为外部盒子设置了transform

借用以下链接一句话：position:fixed 可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们 position:relative/absolute 都限制不了。但是，真是一物降一物，position:fixed 固定效果却被小小的transform给干掉了，直接降级变成 position:absolute 的蛋疼表现。

详细解释：https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/