I have to be able to move a div tag that includes a select drop down menu with "top-right", "top-left", "bottom-right, "bottom-left" to the corresponding position within the webpage.

This is what I have so far. It works on the first change but after that it crashing and does weird stuff.

function changeCorner() {

var index_picked = document.getElementById("corner").selectedIndex;
var corner_picked = document.getElementById("corner").options[index_picked].value;


if (corner_picked == 'tr') {
document.getElementById('page').style.position = "absolute";
document.getElementById('page').style.top = 0;
document.getElementById('page').style.right = 0;
}
else if (corner_picked == 'tl') {
document.getElementById('page').style.position = "absolute";
document.getElementById('page').style.top = 0;
document.getElementById('page').style.left = 0;
}
else if (corner_picked == 'br') {
document.getElementById('page').style.position = "absolute";
document.getElementById('page').style.bottom = 0;
document.getElementById('page').style.right = 0;
}
else if (corner_picked == 'bl') {
document.getElementById('page').style.position = "absolute";
document.getElementById('page').style.bottom = 0;
document.getElementById('page').style.left = 0;
}
}


any suggestions? what am i leaving out? post if you want to take a look at the html

Cal