Why won't two html elements separate?-CodePudding

I've been messing around with random code to try to get better with HTML and CSS, so I've been trying to make a moving figure.

The problem is that the square (head) is attached to the stick (body/torso) and I can't get them off.

How would I separate the two?

// 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;
}

<html>
  <body>
    <title>Moving Cubes :)</title>
  </body>
  
  <body>
    <square id="square"/></square>
    <stick id="stick"/></stick>
  </body>
  <script>
    
  </script>

</html>

CodePudding user response：

I'm guessing this is what you want? You are trying to adjust the stick with position:absolute, but you're also using absolute positioning to move the whole figure. Absolute positioning isn't what you want if you're just trying to move something over in relation to its neighboring element. Try margin instead.

// 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>

CodePudding user response：

Maybe try some css

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

if you mean they're overlapping like in the snippet, maybe try z-index:

stick{
 z-index: 2;
}