什么是position？
position层级样式，有三个 属性：
fixed：
固定在某一个位置，参照物为浏览器窗口（返回顶部按钮+对话窗口）
relative：
相对位置，本身不产生任何效果，和absolute连用，表示absolute的整块放在relative标签块中，
作用relative的区域，top，right，bottom，left的目标对象不再是窗口，而是relative所在的标签作用的区域
absolute：
绝对位置，固定在窗口的某个位置，一般和relative一起出现，
单独出现以浏览器窗口为参照对象
三个属性后面可以top，right，bottom，left，
表示离对象的位置，两个属性就可以确定位置
如何逻辑整理？
- fixed 作用于浏览器窗口，relative+absolute 把absolute标签固定在relative标签中
- top，right，bottom，left，(上+右+底+左)离对象的位置参数，两个属性确定位置
写一个返回顶部的例子
fixed
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <style type="text/css"> 7 .index{ 8 height: 2000px; 9 width: 100%; 10 background-color: #f12401; 11 } 12 .top{ 14 position: fixed; 15 right: 50px; 16 bottom: 100px; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="index"></div> 22 <div class="top"><a href="#">返回顶部</a></div> 23 </body> 24 </html>
无论浏览器中内容如何变化，返回顶部都固定在窗口指定位置
relative + absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
.index{
height: 2000px;
300px;
background-color: #f12401;
position: relative;
}
.top{
right: 10px;
top: 300px;
position: absolute;
}
</style>
</head>
<body>
<div class="index">
<div class="top"><a href="#">返回顶部</a></div>
</div>
</body>
</html>