我猜这就是你想要的？您正在尝试使用position:absolute调整操纵杆，但您也在使用绝对定位来移动整个图形。如果你只是想把某物相对于它的相邻元素移动，那么绝对定位不是你想要的。请尝试margin。

// move controls //
var up = false,
  right = false,
  down = false,
  left = false,
  x = window.innerWidth / 2 - 130 / 2,
  y = window.innerHeight / 2 - 130 / 2
document.addEventListener('keydown', press)

function press(e) {
  if (e.keyCode === 38 /* up */ || e.keyCode === 87 /* w */ ) {
    up = true
  }
  if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */ ) {
    right = true
  }
  if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */ ) {
    down = true
  }
  if (e.keyCode === 37 /* left */ || e.keyCode === 65 /* a */ ) {
    left = true
  }
}
document.addEventListener('keyup', release)

function release(e) {
  if (e.keyCode === 38 /* up */ || e.keyCode === 87 /* w */ ) {
    up = false
  }
  if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */ ) {
    right = false
  }
  if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */ ) {
    down = false
  }
  if (e.keyCode === 37 /* left */ || e.keyCode === 65 /* a */ ) {
    left = false
  }
}

// attach controls to body //
function gameLoop() {
  var square = document.querySelector("square")
  if (up) {
    y = y - 3
  }
  if (right) {
    x = x + 3
  }
  if (down) {
    y = y + 3
  }
  if (left) {
    x = x - 3
  }
  square.style.left = x + 'px'
  square.style.top = y + 'px'
  window.requestAnimationFrame(gameLoop)
}
window.requestAnimationFrame(gameLoop)

// attach controls to rest of body //
function gameLoopStick() {
  var stick = document.querySelector("stick")
  if (up) {
    y = y - 3
  }
  if (right) {
    x = x + 3
  }
  if (down) {
    y = y + 3
  }
  if (left) {
    x = x - 3
  }
  stick.style.left = x + 'px'
  stick.style.top = y + 'px'
  window.requestAnimationFrame(gameLoopStick)
}
window.requestAnimationFrame(gameLoopStick)

square {
  border: 8px solid black;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 100px;
  top: 100px;
}

stick {
  border: 5px solid black;
  height: 100px;
  position: absolute;
  left: 200px;
  top: 200px;
  margin-top: 116px;
  margin-left: 56px;
}

<square id="square" /></square>
  <stick id="stick" /></stick>

也许可以试试一些css

square{
  padding-bottom: 5px;
  margin-bottom: 10px;
}

如果你的意思是它们像片断中那样重叠，也许可以试试z-index：

stick{
 z-index: 2;
}