我们可以使用CSS的postion属性来设置元素的定位，postion的设置如下：
1.relative 生成相对定位元素，元互所占据的文档流的位置保留，元素本身相对自身原位置偏移；
2.absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素以进行定位；
3.fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位；
4.static 默认值，没有定位，元素出现在正常的文档流中，相对于取消定位属性或者不设定位属性；
5.inherit 从父元素继承position属性的值；
定位元素的偏移
定位的元素还需要用left right top或者bottom来设置相对于参照元素的偏移值；
定位元素的层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级；
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
.box{
width: 400px;
height: 400px;
border: 1px solid #000;
margin:50px auto 0;
}
.box02,.box01{
width: 300px;
height: 100px;
margin:10px;
}
.box01{
background-color:green;
position: fixed;
left: 10px;
}
.box02{
background-color: blue;
color:#fff;
}
</style>
</head>
<body>
<div class="box">
<div class="box01">box1</div>
<div class="box02">box2</div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/zijiang-4476/p/12221102.html