为什么一个属性都要拿出来讲呢，因为position是我们在布局中最基本的定位，夯实基础真的很重要噢。
这是我参与更文挑战的第10天，活动详情查看：更文挑战
1、静态定位
position: static;
静态定位就是position的默认值，一般我们不会特地进行设置。它意味着讲元素放进文档布局流的正常位置。 看下面这个例子，盒子的位置没有任何的变化。
<div class="container">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
</div>
2、相对定位
position: relative;
相对定位就是先讲元素放置在没有定位的位置，然后在不改变页面布局的前提下调整位置。
怎么调整位置，也就是需要用到top,right,bottom,left属性来修改位置。
看一下下面的例子，元素在不设置top,right,bottom,left属性的时候，仍然是在原来的位置， 但是设置了top:20px的时候，我们可以看到2号盒子往下移动了，也就是相对于原来的顶部(top)位置距离了20px;
设置left:50px的时候，覆盖到了第三个盒子。需要注意，relative是相对于原来的位置的调整。
3、绝对定位
position: absolute;
绝对定位跟相对定位类似，也是需要用到top,right,bottom,left属性来修改位置。
但是不同的是，相对定位是相对于原来的位置的调整，没有脱离文档流，而绝对定位则脱离了文档流，
从例子上可以看到，同样的top:20px;left:50px;2号盒子是相对于整个视口的距离调整。
4、固定定位
position: fixed;
固定定位，顾名思义，它是固定在视口当中的，就算滚动屏幕时，它也在视口的同一位置。
比如下面整个例子，2号盒子定位于距离顶部20px，距离左侧50px的位置，当我们将页面的高度调高， 出现滚动条，滚动到页面下方的时候，1、3、4盒子都看不到了，只有2号依然在视口的同样位置。
5、粘性定位
position: sticky;
粘性定位可以说是相对定位和固定定位的混合。 该定位规定在某一个特定的阈值之前的为相对定位，之后的为固定定位。
听起来挺特别的，让我们来实践看一看。
我们设置距离顶部0px，当拖动滚动条，在距离顶部还有位置的时候，是相对定位，也就是原本的位置。 而当2号盒子在距离顶部0px之后，变成了固定定位，向下拖动滚动条，2号盒子还是在视口的固定定位。
以上便是position的常用方法，有助于我们在实现某种功能的时候进行定位~~
