一、先理一下position有多少种用法，再开始实例。
- absolute 绝对定位，相对于非static的父元素
- fixed 绝对定位，相对于浏览器
- relative 相对定位，相对默认位置
- static 默认值。
以上的1，2，3都是通过top,left,right,bottom属性来生效。
二、用实例去理解吧，先做个盒子，里面有一个公式。
三、面积应该是a的平方，可我们的2却不在平方的位置，于是我们就用relative相对定位来完成这个工作，相对定位就是相对于原来的位置进行调整。
四、我们加一个关闭按钮，让它位于盒子的右上角，用absolute绝对定位来实现，absolute是根据非static的父元素来绝对定位的，这个和fixed不一样，通过例子来理解吧，先做一个按钮，然后给按钮一个absolute定位，让它距离右边是0像素。
五、看到了没，按钮居然不在盒子里面，那是因为按钮的父元素box1是static的，只有父元素是非static了以后，position的absolute才会对父元素绝对定位，试试看吧，我们把父元素加上一个非static的position属性。
六、按钮终于进盒子里面了，现在我们可以了解fixed了，它是浏览器的绝对定位，无论我们如何滚动浏览器，它都会在定好的位置，为了能让浏览器上下滚动，我在下面加了很多换行，无论你怎么滚动，盒子的位置不变。
七、试着改变一下fixed的位置，再次强调，它是浏览器的绝对定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 100px;
line-height: 100px;
/* 让盒子内容垂直居中 */
background: #ccc;
/* 背景色 */
position: fixed;
left: 20px;
top: 10px;
}
.up-span{
position: relative;
top: -6px;/* 配合top,left,right,bottom来实现位置变化*/
}
.btclose{
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<div class="box1">面积公式S=a<span class="up-span">2</span>
<button class="btclose">关闭</button>
</div>
<!-- 我们用span标签把2独立出来 -->
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
<br>这里是换行
</body>
</html>