HTML CSS position 属性及relative、absolute、fixed区别

position 是一个比较实用的功能，网页编程中必备技能！

在页面的编写过程中我们通常会用到html的position属性来合理安排我们标签的位置，来达到视觉的美观，所以我们需要加深对position这个属性的了解。

一、Position的属性值

position有四个值：static，relative，absolute，fixed；

定义看着云里雾里，下面具体说明

二、static

static就是html默认的文档流形式，一个块状元素独占一行如div、p，多个内联元素占一行如span、a；
实际实用确实不多，基本不使用。

三、relative

relative是相对于标签原来的位置偏移，请看图：

其实就是相对于自己的位置的改变，可以理解为自身的移动，偏移位置

四、absolute

absolute是相对于不是默认文档流形式的父类元素的位置偏移，如果父类元素是static的话，那就看父类元素的父类元素是不是非static的，一直找到body为止。
实际实用过程非常多，也是最多的。可以理解为相对于父亲元素的定位，那么在每个div里面，相同系列的每个模块特定位置展示出来，非常实用。

比如价格相对于父布局总是在同一个位置，就可以用这个属性来实现。

五、fixed

fixed是相对于浏览器窗口的位置偏移，很好理解，实际也非常实用，比如某一块内容固定在浏览器的某一个位置，永远在这个位置。最简单例子就是，返回顶部、底部按钮功能性业务。