Moving an item ...how?

Moving an item ...how?

Hi all:

I have the following html + javascript but it doesnt do what I want. I would like to be above to move an element - how can I do this?

Many thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>

</title>
<script language="javascript" type="text/javascript" src="../Scripts/jquery-1.3.1.js"></script>


<style type="text/css">
#p1 {background-color:red;width:200px;height:150px;}
</style>

<script language="javascript" type="text/javascript">

function getLeft() {
alert($("#p1").position().left);
}

function setLeft(value) {
$("#p1").css("left", value + "px");
}

function getTop() {
alert($("#p1").position().top);
}

function setTop(value) {
$("#p1").position().top=value;
}

</script>
</head>
<body>

<p id="p1">This is paragraph1</p>

top:
<br />
<a href="javascript:getTop()">getTop()</a>
<a href="javascript:setTop('100')">setTop() (Doesnt work)</a>

left:
<br />
<a href="javascript:getLeft()">getLeft()</a>
<a href="javascript:setLeft('150')">setLeft() (Doesnt work)</a>
</body>
</html>