javascript的小问题

<HTML>
<HEAD>
<TITLE>脚本的基本结构</TITLE></HEAD>
<BODY>
 <div id="div1" style="display:block;position:absolute;top:600px">
     我可以别隐藏！
</div>  <input type="button" value="click me" onclick="alert('you click me!')">
 <input type="button" value="change div1 " onclick="document.getElementById('div1').style.background='red'">
 <input type="button" value="change div1 border " onclick="document.getElementById('div1').style.border='solid red 1px'">
 <input type="button" value="change div1 color " onclick="document.getElementById('div1').style.fontSize='40px'">
 <input type="button" value="change div1 position " onclick="document.getElementById('div1').style.left='100px'">
</BODY>
</HTML>
上面代码出来的效果怎么不对啊？后面几个按钮没有第一个的效果了?怎么回事啊？