Problemer med Left-right, top-bottom i javascript

Hej,

Hvis jeg bruger denne kode, kan jeg ikke sætte position fra RIGHT efter jeg har sat den fra LEFT. Hvad gør jeg ved det? Her er koden:



<html>
<head>
<style type="text/css">

.all {
position: absolute;
width: 100px;
height: 100px; }

</style>
</head>

<body>

<div style="background-color: green; z-index: 10;" class="all" id="greenbox"></div>


<br><br><br><br><br><br><br><br><br><br><br><br>

<button onclick="document.getElementById('greenbox').style.left=40;">Greenbox left=40</button>

<button onclick="document.getElementById('greenbox').style.left=100;">Greenbox left=100</button>

<button onclick="document.getElementById('greenbox').style.right=100;">Greenbox right=100</button>

<button onclick="document.getElementById('greenbox').style.right=40;">Greenbox right=40</button>

<button onclick="document.getElementById('greenbox').style.left=none;">reset</button>

</body>
</html>