JSFiddle - React, Tailwind, and code Playground

CSS

#box1 {
  width: 100px;
  height: 100px;
  background: red;
  border: 10px solid black;
  border-radius: 50%;
}

#box1 {
  color: blue;
  font-size: 25px;
	text-align:center;
}

JavaScript

var pixel = 2;


//document.getElementsByTagName('body')[0].innerHTML  += '<div id="box1"></div> ';


var box1 = document.createElement("div");
box1.id = "box1"
document.getElementsByTagName('body')[0].appendChild(box1);
box1.style.position = 'absolute';
//box1.style.top = oben+'px';
var elm = document.getElementById('box1')
document.body.addEventListener('keydown', function(e) {
  var taste = e.keyCode;
  if (taste == 40) {
    var ab = getAbsoluteY(elm)
    var e = ab + pixel;
    box1.style.top = e + 'px';
  }

  if (taste == 38) {
    var ab = getAbsoluteY(elm)
    var e = ab - pixel;
    box1.style.top = e + 'px';
  }

  if (taste == 39) {
    var ab = getAbsoluteX(elm)
    var e = ab + pixel;
    box1.style.left = e + 'px';
  }

  if (taste == 37) {
    var ab = getAbsoluteX(elm)
    var e = ab - pixel;
    box1.style.left = e + 'px';
  }



  document.getElementById('box1').innerHTML = e;

});






function getAbsoluteX(elm) {
  var x = 0;
  if (elm && typeof elm.offsetParent != "undefined") {
    while (elm && typeof elm.offsetLeft == "number") {
      x += elm.offsetLeft;
      elm = elm.offsetParent;
    }
  }
  return x;
}


// Findet die absolute y Position eines Elementes raus
function getAbsoluteY(elm) {
  var y = 0;
  if (elm && typeof elm.offsetParent != "undefined") {
    while (elm && typeof elm.offsetTop == "number") {
      y += elm.offsetTop;
      elm = elm.offsetParent;
    }
  }
  return y;
}