如何给定位盒子
想给盒子定位，必须提供三个要素，锚点、方向和距离。而盒子的相对定位，就是以元素本身的位置作为锚点。
盒子定位的属性名和属性值
position：relative
relative值代表的定位是以元素本身的位置作为锚点，元素本体的位置并没有改变，其占据着原来的位置，但他的视觉位置发生了改变，我们可以认为，元素本身能被看到的灵魂位置发生了改变，但其不可视的肉体依然占据着原来的位置。
相对定位的锚点
由上面得知，relative值代表的相对定位，其锚点是元素原来的位置。
方向和距离属性
锚点和视觉位置左边的距离——left：
锚点和视觉位置右边的距离——right：
锚点和视觉位置上边的距离——top：
锚点和视觉位置下边的距离——bottom：
例子
移动绿色的位置，距离原本左边相差50px，顶部相差10px。
移动前
<!doctype html>
<!--声明文档类型，告诉浏览器使用HTML5标准来渲染页面。-->
<head>
<style>
div{
width: 100px;
height: 100px;
margin: 3px;
}
#div1{
background-color: red;
}
#div2{
background-color: green;
}
</style>
</head>
<body>
<div id="div1">红</div>
<div id="div2">绿</div>
</body>移动后
<!doctype html>
<!--声明文档类型，告诉浏览器使用HTML5标准来渲染页面。-->
<head>
<style>
div{
width: 100px;
height: 100px;
margin: 3px;
}
#div1{
background-color: red;
}
#div2{
background-color: green;
/* 使用相对定位 */
position: relative;
left: 50px;
top: 10px;
}
</style>
</head>
<body>
<div id="div1">红</div>
<div id="div2">绿</div>
</body>