CSS中position属性详解
根据W3C的解释为：position 属性规定元素的定位类型，把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
可能的值
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit：规定应该从父元素继承 position 属性的值。
我们用的最多的absolute和relative，接下来可以通过具体例子来更加直观地体现。
举例
一：绝对定位
position: absolute；绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
二：相对定位
position: relative；相对定位：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
注意
position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inline; display:block都是无效的。
但是float在IE6下的双边距bug就是用display:inline; 来解决的。position:relative不会隐式改变display的类型。
主要是元素的定位效果，position的用法和定义如下：
position主要是用在布局时的定位，所有的html标签都可以使用，而绝对固定元素会产生一个块级的框框，相对定位元素会默认偏移；
absolute属性，将元素设置为绝对定位，元素可以通过“left，right，top，botton”属性来决定元素的位置,通俗点说其实绝对定位,就是相对于浏览器的上下左右；
2.relative元素,就是相对定位，元素可以通过"left,rightTOP.botton"等改变元素的位置,就是相对于父元素的点来进行定位；
3.fixed就是固定定位了,这个就更好理解了，你可以看到在网页上经常会有一个元素比如"置顶"这个吧,其实就是用的固定定位,就是说,相对于浏览器当前看到的什么位置,,他的属性同样是依据"left,right,top,botton"来进行改变；
position扩展认知:
属于css层叠样式表当中的一种，定位属性,在前端布局中起到至关重要的作用。
Vue实践-CSS样式position/display/float属性对比使用
CSS的Position属性及其使用
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit
规定应该从父元素继承 position 属性的值。
