思路:用一个大盒子装下两个盒子,然后给大盒子设置postion:relative,然后给需要移动的盒子设置position:absolute.
<style>.banner{
width:100%
height:400px
position:relative
}
.banner .nav{
position:absolut
right:10px
top:150px
}
</style>
<div class="box">
<div class="banner"><img src="..."></div>
<div class="nav">这个盒子是需要挪动的</div>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>拖动DIV</title>
<style type="text/css">
div{
width:200px
height:200px
background-color:#cef
position:absolute
}
</style>
<script type="text/javascript">
function movestart(obj) {
var width=event.offsetX
var height=event.offsetY
document.onmousemove=function() {
obj.style.left=event.clientX-width+"px"
obj.style.top=event.clientY-height+"px"
}
}
function moveend() {
document.onmousemove=null
}
</script>
</head>
<body>
<div id="mydv" onmousedown="movestart(this)" onmouseup="moveend()">这个可以拖动</div>
</body>
</html>
