编了一个游戏测试小网页,竟然发现DIV不能随便移动,查了半天终于解决了静态和编程定位的问题。特别记录一下。
<div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" style="background-color: #D94A38; position: absolute; width: 90px; left: 217px; top: 20px; height: 20px; padding: 40px;">Click Me</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank ";
obj.style.left="-300";
//document.getElementById("dd0").style.width="6"
document.getElementById("compman").height="250";
document.getElementById("compman").width="300";
var element=document.getElementById("dd0");
element.style.left="155";
element.style.backgroundColor="#39fA08";
}
</script>
DIV的定位
一、定位的属性:
1.定位模式:position:一共有4种
satitic:默认定位方式
静态定位情况下不能通过边偏移来移动
relative:相对定位
相对当前元素(本身)在文档流中的位置去偏移
相对于自身原来的位置去移动,但是在文档流中的位置不变,依旧占据着
文档流中的位置
absolute:绝对定位 他是脱离文档流的
绝对定位找的参考点是,已有定位模式的父元素的左上角,进行边偏移,
如果当前父元素没有定位模式,就会自动找到带有定位模式的父元素(body)
(绝对定位一般用于,父相对自觉对的情况下)
fixed:相对视窗定位
fixed定位是脱离文档流的定位
参考点在浏览器窗口的左上角一点