定位属性：

static :默认文本流  margin padding 从左到右 从上到下

relative:相对定位

absolute:绝对定位

fixed:固定定位（脱离原来的文本） 

一、相对定位

相对定位是指，该元素相对自己原来位置，偏移一定距离，元素可以通过顶部top，底部bottom，左侧left和右侧right属性来设置定位。它相对的是它自己。 

举例：大div里面包含5个小P，给P不同的类名，分别设置绝对定位和相对定位，看看他们有什么变化。没有设置定位的代码如下：

源码

效果如图所示：

相对定位图例1

现在给第一个p标签设置相对定位，让他相对于自己原来的位置上偏移50px，左边偏移50px，具体代码如下：

1.p1{width: 100px;height: 100px;background: red;position: relative;left: 50px;top: 50px;}

效果图：

相对定位图例2

对比前后效果图，有没有发现第一个p元素，它相对自己原来的位置发生了偏移，而且偏移以后，它依然占据原来的位置，后面的元素不会填补，如果有重叠，会重叠在它文档流元素之上，相对定位不会把其他元素挤掉。

二、绝对定位

绝对定位是指，该元素相对它的父元素偏移一定距离，元素可以通过顶部top，底部bottom，左侧left和右侧right属性来设置定位。

注：相对的是父元素，而且这个父元素必须设置了position属性。如果父元素没有position属性，则从最近的父元素开始找，直到找到body为止。

举例：给第三个p元素设置绝对定位，让其上偏移200px，左偏移200px，具体代码如下：

.p3{width: 100px;height: 100px;background: yellow;position: absolute;left: 200px;top: 200px;}

绝对定位图例

对比图1和图3可以发现，设置了绝对定位的元素，会脱离文档流，后面的元素会填补上来。因为第三个p标签的父元素为div，没有给div设置position属性，所以它最终找到body，相对于body发生了偏移。

三、相对定位和绝对定位的区别

相对定位：相对自己原来的位置发生偏移，不会脱离文档流，不会删除它原来在文档流中占据的位置，且后面是元素不会填补空位

绝对定位：相对它的父元素发生偏移（而且这个父元素必须设置了position属性，如果父元素没有position属性，则从最近的父元素开始找，直到找到body为止），会脱离文档流，后面的元素会填补它原来的位置。

四、固定定位

position:fixed;

            盒子将脱离原来的文本流，进入到新的一层，

            盖在原来文本流之上，并且可以通过left right top bottom

            四个属性，对盒子进行移动，移动的基准定是浏览器视窗，与其他盒子无关

定位四条代码必须写： 

            position:设置位置属性;

            left/right/top/bottom/right:进行定位操作;

            z-index:设置该盒子的显示优先级（没有单位 0开始增大 值越大越开始靠前）

            盒子固定定位后，回脱离原来的文本，同样将不在具有原来的特性，宽高由内容撑开，margin:会叠加; 一般不用margin进行位置改变，任何盒子都可以fixed。

            应用场景：广告，聊天窗口，导航，活动信息