Position：
absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 |
relative | 生成相对定位的元素，相对于其正常位置进行定位。 |
fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 |
static | 默认值。没有定位。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
1.relative，相对定位：
（1）单模块从原点位置相对移动，从原来的位置移动对应的距离：如下，父元素从原来的位置向上和向右移动了100rpx的距离。
<view class='father'>
<view class='bro'>大儿子</view>
<view class='son'>二儿子</view>
</view>.father{
background-color: yellow;
width: 300rpx;
height: 300rpx;
margin-top: 100rpx;
margin-left: 100rpx;
position: relative;
}
（2）两个模块从相对位置进行移动：
两个模块从自己的相对位置进行移动，都是从之前自己原来的位置出发。
.bro{
background-color: red;
width: 100rpx;
height: 100rpx;
position: relative;
top: 100rpx;
right: 100rpx;
}
.son{
background-color: blue;
width: 100rpx;
height: 100rpx;
position: relative;
top: 20rpx;
left: 20rpx;
}
2.绝对定位：相对于 static 定位以外的第一个父元素进行定位。
(1)如果大儿子变为绝对定位，那么二儿子的位置也会发生改变，变为从原点出发。
可以看到，当大儿子变为绝对定位后，二儿子的位置从原来的地点变为了父元素的起点位置，大儿子采用绝对定位后，覆盖在二儿子上面，绝对定位存在着层级的关系。
.bro{
background-color: red;
width: 100rpx;
height: 100rpx;
position: absolute;
}
.son{
background-color: blue;
width: 100rpx;
height: 100rpx;
}
如果给二儿子加上一个绝对/相对定位，二儿子就会达到最上层：
.bro{
background-color: red;
width: 100rpx;
height: 100rpx;
position: absolute;
}
.son{
background-color: blue;
width: 100rpx;
height: 100rpx;
position: absolute;
}
也可以通过相对定位将二儿子和大儿子一起放出来：
.bro{
background-color: red;
width: 100rpx;
height: 100rpx;
position: absolute;
}
.son{
background-color: blue;
width: 100rpx;
height: 100rpx;
position: relative;
top: 100rpx;
left: 100rpx;
}
3.固定定位：生成绝对定位的元素，相对于浏览器窗口进行定位。
.bro{
background-color: red;
width: 100rpx;
height: 100rpx;
position: fixed;
top: 10rpx;
left: 10rpx;
}
.son{
background-color: blue;
width: 100rpx;
height: 100rpx;
position: relative;
top: 100rpx;
left: 100rpx;
}
相对定位可以看作特殊的普通流定位，元素位置是相对于他在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。
绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块儿（body或html神马的）元素。
因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
