原理图
实现div块跟随鼠标移动
代码
#box{height: 100px;width: 100px;background-color: blue;position: absolute;}
<div id="box"></div>
<script>
var jsdiv=document.getElementById("box")
basex=0
basey=0
movex=0
movey=0
jsdiv.addEventListener("mousedown",function(e){
let ee=e||window.e
basex=ee.pageX
basey=ee.pageY
document.onmousemove=function(e){
let ev=e||window.e
movex=ev.pageX-basex
movey=ev.pageY-basey
basex=ev.pageX
basey=ev.pageY
jsdiv.style.left=jsdiv.offsetLeft+movex+"px"
jsdiv.style.top=jsdiv.offsetTop+movey+"px"
}
},false)
jsdiv.addEventListener("mouseup",function(){
document.onmousemove=null
},false)
</script>
疑问
设置box的样式时,若不设置positon:absolute,box会固定位置无法移动;设置positon:relative,box移动会偏离鼠标移动位置。
解析
1.relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
黄色背景的层定位为relative,红色边框区域为其在正常流中的位置。
2.absolute:生成绝对定位的元素,**相对于static定位以外的第一个父元素进行定位。**元素的位置通过"left",“top”,"right"以及"bottom"属性进行规定。可通过z-index进行层次分级。
3.两者区别
relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式
图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute。
可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位。