Position 的四种属性值

   Position和float这两个元素属性非常重要；今天主要来看一看position在定中的作用。

首先Position有四个属性值，分别是static 、fixed、 relative 、absolute。

第一个属性值是static，这是position的默认属性，一般我们都不会用到他，所以也很少提到他，但是在特殊的情况下，他又有着不可替代的作用，比如，在媒体查询页面当中，正常页面当中需要给元素加position属性，但是在响应式页面中不需要，这是就只能用position：static；没有position：none；的写法，网页也不会识别。

第二个属性fixed——固定定位，fixed是相对于window窗口的定位，一般在网页中也会经常看到，例如置顶，等

<div class="box1"></div>
<div class="pink">置顶</div>

<style>
 .box1{
  height: 2000px;
  width:10px;
 }
.pink{
height: 100px;
width: 100px;
background:pink;
position: fixed;
bottom: 20px;
right: 100px;
}
</style>

如图中所示，无论滚动条怎么滑动上图的滚动条，div-pink都不会改变自己在窗口的位置；

第三个属性值relative——相对定位；相对于自己本身的定位；这个定位一般是和absolute属性值一起用；相对定位不会破坏元素的文本流，但是会改变元素的视觉效果

第四个属性值absolute——绝对定位；相对于父级元素的定位，如果没有父级元素时相对于窗口的定位；

需要注意的是static relative这两个属性值是不会破坏元素的文本属性；但是fixed 和 abosulte则会改变元素的文本流，有float的效果。