Position有以下属性值：
static
- 默认值，没有定位，元素出现在正常的文档流中
- 忽略
top,bottom,left,right或者z-index声明
relative（相对定位）
- 相对于自身原本位置进行定位
- 其不影响元素本身特性：无论是内联元素还是块级元素都会保留其原来的特性，比如内联元素设置宽高依然是无效的
- 不会使元素脱离文档流：元素原本的位置会被保留，并不会被后面的元素所填充
absolute（绝对定位）
- 元素会完全脱离文档流，在文档流中也不在占位，后面的元素将会填充上去
- 改变内联元素的特性，内联元素可以设置宽高
- 改变块级元素的特性，块级元素在未设置宽度时由内容撑开宽度
- 相对于
static定位以外的一个父元素进行定位（若其父元素没有定位则逐层上找，直到document）
fixed（固定定位）
- 相对于浏览器窗口进行定位，元素的位置在屏幕滚动时不会改变
- 其它特性和绝对定位相似，元素会脱离文档流，同样会该变内联元素和块级元素的特性
sticky（粘性定位）
因为是新的属性值，很多同学可能没有用过，所以我们重点来讲一下这个属性
- 其是
CSS3新增的属性值，粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位 - 该特性兼容性较差，部分
IE版本不支持sticky定位
注意事项：
sticky元素仅在父元素内生效- 必须指定
top、bottom、left或bottom四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同 - 设定为
position:sticky元素的任意父节点的overflow属性必须是visible（默认值），否则position:sticky不会生效
我对该sticky属性值的理解就是：在达到设置的阈值之前，它的行为就像 position:relative（不完全等价），因为无论你有没有设置偏移量，它都发生不会偏移；在滚动过程中，设置了postition:sticky属性的元素距离viewport达到或小于sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位（也不完全等价），固定到适当位置，但原先的位置依然像relative属性一样不会被占用。所以sticky属性更像是结合了relative和fixed这个属性值所得的产物
使用场景：
在网页开发中经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候，让一部分内容作为navbar，也就是置顶显示，我们一般会使用js监听scroll事件来实现，但是新增的css属性position:sticky却可以帮助我们轻松实现
示例：
<style>
.tab-control{
position: sticky;
top: 44px;
}
</style>
<tab-control class="tab-control" :titles="['流行','新款','精选']"></tab-control>
效果：
inherit
- 规定从父元素继承
position属性的值
