思路:用一个大盒子装下两个盒子,然后给大盒子设置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>
边框是不算入元素大小的
所以我们需要将DIV的大小也改动（大小是绝对的时候需要改动：）
div{width:100px
height:100px
background:black
}
div:hover{
width:90px
height:90px
border:5px solid grey
}
这个就是会在边框动的时候把面积缩小，如果是相对大小就需要使用calc函数（计数器），例如：
div{width:90vw
height:90vh
background:black
}
div:hover{
width:calc(90vw - 10px)
height:calc(90vh - 10px)
border:5px solid grey
}
这里介绍两种方式：
一：通过css样式中的 ":hover"实现，代码如下
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:red
width:200px
height:200px
}
div:hover{
background:red
width:500px
height:500px
}
</style>
</head>
<body>
<div>变大</div>
</body>
</html>
二：通过javascript方式实现，代码如下
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:red
width:200px
height:200px
}
.divs{
background:red
width:500px
height:500px
}
</style>
</head>
<body>
<div>变大</div>
<script>
// 首先获取div元素
var divs = document.getElementsByTagName('div')[0]
//鼠标移入，将divs的className样式赋给该标签
divs.onmouseover = function () {
this.className = "divs"
}
//鼠标移出，将空的className样式赋给该标签
divs.onmouseout = function () {
this.className = ""
}
</script>
</body>
</html>
