movingbox.html

<style>
* {
	margin: 0;
	padding: 0;
}

#box {
	position: fixed;
	top: 200px;
	left: 200px;
	width: 100px;
	height: 100px;
	background-color: yellow;
	transition: all 0.5s;
}

#ctrlcont {
	position: fixed;
	width: 250px;
	height: 170px;
	top: 10px;
	right: 20px;
}

.ctrl {
	position: absolute;
	display: block;
	width: 80px;
	height: 80px;
	background-color: green;
}
#up {
	left: 90px
}
#down {
	top: 90px;
	left: 90px;
}
#left {
	top: 90px;
}

#right {
	top: 90px;
	left: 180px;
}
</style>
<div id="box"></div>
<div id="ctrlcont">
	<div id="up" class="ctrl"></div>
	<div id="down" class="ctrl"></div>
	<div id="left" class="ctrl"></div>
	<div id="right" class="ctrl"></div>
</div>
<script>
	var box = document.getElementById('box');
	
	var up = document.getElementById('up');
	var down = document.getElementById('down');
	var left = document.getElementById('left');
	var right = document.getElementById('right');
	
	up.onclick = function(){
		var x = box.getBoundingClientRect();
		var moveup = x.top - 50;
		box.style.top = moveup + 'px';
	}
	
	down.onclick = function(){
		var x = box.getBoundingClientRect();
		var movedown = x.top + 50;
		box.style.top = movedown + 'px';
	}
	
	left.onclick = function(){
		var x = box.getBoundingClientRect();
		var moveleft = x.left - 50;
		box.style.left = moveleft + 'px';
	}
	
	right.onclick = function(){
		var x = box.getBoundingClientRect();
		var moveright = x.left + 50;
		box.style.left = moveright + 'px';
	}
	
</script>