fixed位置偏移的问题

419 阅读1分钟

元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。

以上说的是正常情况。

还有一种特殊情况就是,当使用了fixed定位的元素的父元素使用了transform时,那么(猜测)fixed就会变成absolute定位,效果确实是这样的。

以下代码以供检验:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>fixed 位置偏移的问题</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .father {
      width: 100vw;
      height: 100vh;
      background-color: red;
      /* 父元素使用 transform ,把下面这行注释掉 fixed 就没问题了 */
      transform: translate(25%, 25%);
      /* margin: 25% 0 0 25%; */  /* 使用 margin 改变父元素的位置则不会影响 fixed 定位的效果 */
    }
    .child {
      width: 50vw;
      height: 50vh;
      background-color: green;
      position: fixed;
      left: 25%;
      top: 25%;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child"></div>
  </div>
</body>
</html>