relative 与absolute 对于offset的影响

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
      }
      #box1 {
        position: relative;
        left: 50%;
        top: 100px;
        width: 100px;
        height: 100px;
        background-color: rgb(90, 224, 96);
      }
    </style>
  </head>
  <body>
    <div id="box1"></div>
  </body>
  <script>
    let box = document.querySelector('#box1');
    document.addEventListener('keydown', function (e) {
      // 上移动
      if (e.keyCode === 38) {
        box.style.top = box.offsetTop - 1 + 'px';
      }
      // 下移动
      if (e.keyCode === 40) {
        box.style.top = box.offsetTop + 1 + 'px';
      }
      // 左移动
      // console.log('左', e.keyCode);
      if (e.keyCode === 37) {
        box.style.left = box.offsetLeft - 1 + 'px';
      }
      // 右移动
      if (e.keyCode === 39) {
        box.style.left = box.offsetLeft + 1 + 'px';
      }
    });
  </script>
</html>

relative定位是相对于父元素body内容定位（不含margin），而offsetTop是包含父元素margin来定位的，而body默认有margin，这样会导致设置left/top会有偏差
解决方案一:将relative改为absolute
解决方案二:使用relative时去掉body的margin就正常了

原文链接：https://blog.csdn.net/qq_41543064/article/details/122251012