DIV从不能移动变成随便定位(静态+编程)的方法

编了一个游戏测试小网页,竟然发现DIV不能随便移动,查了半天终于解决了静态和编程定位的问题。特别记录一下。

<div onmousedown="mDown(this)" onmouseup="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定位是脱离文档流的定位

​ 参考点在浏览器窗口的左上角一点
 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

moneytree

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值