<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Position Elements</title>
<style>
#txy{position: absolute;
border: 2px solid black;
width: 200px;
height: 200px;
margin-left: 100px;
margin-top: 20px;
background-color: rgb(224,224,224);}
#btt{}
</style>
<script>
window.onload=function trn1() {
var left = document.getElementById("left");
var txy = document.getElementById("txy");
left.onclick = function () {
txy.style.left = (txy.offsetLeft - 10) + "px"
}
};
window.onload=function trn5() {
var right = document.getElementById("right");
var txy = document.getElementById("txy");
right.onclick = function () {
txy.style.left = (txy.offsetLeft+10) + "px"
}
};
window.onload=function trn4() {
var show = document.getElementById("show");
var txy = document.getElementById("txy");
show.onmouseover = function () {
txy.style.display = "none"
};
show.onmouseout = function () {
txy.style.display = "block"
};
};
window.onload=function trn3() {
var up = document.getElementById("up");
var txy = document.getElementById("txy");
up.onclick = function () {
txy.style.top = (txy.offsetTop - 10) + "px"
};
};
window.onload=function trn2() {
var down = document.getElementById("down");
var txy = document.getElementById("txy");
down.onclick = function () {
txy.style.top = (txy.offsetTop+10) + "px"
}
}
</script>
</head>
<body>
<div id="txy">This square is an absolutely positioned layer that you can move using the buttons above.</div>
<div ID="btt">
<button id="left"><-Left</button> <button id="right">right-> </button> <button id="up">Up</button> <button id="down">Down</button> <button id="show">Show</button> <button id="move">Move</button>
</div>
</body>
</html>
