bzdgn · January 30, 2016 12:43
diff --git a/css_pos_demo.html b/css_pos_demo.html
 <!DOCTYPE html>
 <html>
    <head>
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            
            .main-container {
                position: relative;
                background-color: black;
                height: 100%;
                color: white;
                margin: 0 auto;
                padding: 0;
            }
            
            .container {
                position: absolute;
                text-align: center;
                top: 0;
                width: 100%;
                height: 100%;;
                border: 1px solid navy;
                background-color: #222222;
                margin: 0 auto;
                padding: 0;
            }
            
            .top-btn {
                position: absolute;
                top: 0;
                left: 50%;
            }
            
            .bottom-btn {
                position: absolute;
                left: 50%;
                bottom: 0;
            }
            
            .left-btn {
                position: absolute;
                top: 50%;
                left: 0;
            }
            
            .right-btn {
                position: absolute;
                top: 50%;
                right: 0;
            }
            
            .btn {
                border: 2px solid yellow;
                background-color: #0000000;
                color: white;
                cursor: crosshair;
            }
            
            .item {
                position: absolute;
                border: 2px solid black;
                background-color: lime;
                width: 10px;
                height: 10px;
                top: 50%;
                left: 50%;
            }
        </style>
    </head>
    <body>
        <div class="main-container">
            <div class="container">
                <div id="up-btn" class="btn top-btn">Up</div>
                <div id="down-btn" class="btn bottom-btn">Down</div>
                <div id="left-btn" class="btn left-btn">Left</div>
                <div id="right-btn" class="btn right-btn">Right</div>
                <div id="item" class="item"></div>
            </div>
        </div>
        <script>
            "use strict";
            
            var upBtn       =   document.getElementById(    "up-btn"   );
            var downBtn     =   document.getElementById(    "down-btn"  );
            var leftBtn     =   document.getElementById(    "left-btn"  );
            var rightBtn    =   document.getElementById(    "right-btn" );
            var item        =   document.getElementById(     "item"     );
            
            var delta = 10;
            
            upBtn.addEventListener(     "click", function() { moveUp(item)    ; } );
            downBtn.addEventListener(   "click", function() { moveDown(item)  ; } );
            leftBtn.addEventListener(   "click", function() { moveLeft(item)  ; } );
            rightBtn.addEventListener(  "click", function() { moveRight(item) ; } );
            
            function moveUp(el) {
                var x = getOffsetX(el);
                var y = getOffsetY(el);
                
                var newY = y - delta;
                move(el, x, newY);
            }
            
            function moveDown(el) {
                var x = getOffsetX(el);
                var y = getOffsetY(el);
                
                var newY = y + delta;
                
                move(el, x, newY);
            }
            
            function moveLeft(el) {
                var x = getOffsetX(el);
                var y = getOffsetY(el);
                
                var newX = x - delta;
                
                move(el, newX, y);
            }
            
            function moveRight(el) {
                var x = getOffsetX(el);
                var y = getOffsetY(el);
                
                var newX = x + delta;
                
                move(el, newX, y);
            }
            
            function move(el, x, y) {
                el.style.left = x + 'px';
                el.style.top = y + 'px';
            }
            
            function getOffsetX(el) {
                return el.offsetLeft;
            }
            
            function getOffsetY(el) {
                return el.offsetTop;
            }
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}

	.main-container {
	position: relative;
	background-color: black;
	height: 100%;
	color: white;
	margin: 0 auto;
	padding: 0;
	}

	.container {
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
	height: 100%;;
	border: 1px solid navy;
	background-color: #222222;
	margin: 0 auto;
	padding: 0;
	}

	.top-btn {
	position: absolute;
	top: 0;
	left: 50%;
	}

	.bottom-btn {
	position: absolute;
	left: 50%;
	bottom: 0;
	}

	.left-btn {
	position: absolute;
	top: 50%;
	left: 0;
	}

	.right-btn {
	position: absolute;
	top: 50%;
	right: 0;
	}

	.btn {
	border: 2px solid yellow;
	background-color: #0000000;
	color: white;
	cursor: crosshair;
	}

	.item {
	position: absolute;
	border: 2px solid black;
	background-color: lime;
	width: 10px;
	height: 10px;
	top: 50%;
	left: 50%;
	}
	</style>
	</head>
	<body>
	<div class="main-container">
	<div class="container">
	<div id="up-btn" class="btn top-btn">Up</div>
	<div id="down-btn" class="btn bottom-btn">Down</div>
	<div id="left-btn" class="btn left-btn">Left</div>
	<div id="right-btn" class="btn right-btn">Right</div>
	<div id="item" class="item"></div>
	</div>
	</div>
	<script>
	"use strict";

	var upBtn = document.getElementById( "up-btn" );
	var downBtn = document.getElementById( "down-btn" );
	var leftBtn = document.getElementById( "left-btn" );
	var rightBtn = document.getElementById( "right-btn" );
	var item = document.getElementById( "item" );

	var delta = 10;

	upBtn.addEventListener( "click", function() { moveUp(item) ; } );
	downBtn.addEventListener( "click", function() { moveDown(item) ; } );
	leftBtn.addEventListener( "click", function() { moveLeft(item) ; } );
	rightBtn.addEventListener( "click", function() { moveRight(item) ; } );

	function moveUp(el) {
	var x = getOffsetX(el);
	var y = getOffsetY(el);

	var newY = y - delta;
	move(el, x, newY);
	}

	function moveDown(el) {
	var x = getOffsetX(el);
	var y = getOffsetY(el);

	var newY = y + delta;

	move(el, x, newY);
	}

	function moveLeft(el) {
	var x = getOffsetX(el);
	var y = getOffsetY(el);

	var newX = x - delta;

	move(el, newX, y);
	}

	function moveRight(el) {
	var x = getOffsetX(el);
	var y = getOffsetY(el);

	var newX = x + delta;

	move(el, newX, y);
	}

	function move(el, x, y) {
	el.style.left = x + 'px';
	el.style.top = y + 'px';
	}

	function getOffsetX(el) {
	return el.offsetLeft;
	}

	function getOffsetY(el) {
	return el.offsetTop;
	}
	</script>
	</body>
	</html>