1、绝对定位

绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。

绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。

2、相对定位

相对定位与绝对定位的区别在于它的参照点不是左上角的原点，而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置，也仍然从原始的起点处占据空间。

CSS中的position属性可以设置元素的定位类型，比如fixed，relative，absolute等等，但是很多人搞不懂relative相对定位和absolute绝对定位的区别，这篇文章就和大家讲讲什么是绝对定位，什么是相对定位，以及相对定位和绝对定位的区别，有一定的参考价值，感兴趣的朋友可以参考一下。

一、相对定位

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

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

没有设置定位的代码如下：

效果如图所示：

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

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

效果图：

对比前后效果图，有没有发现第一个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为止），会脱离文档流，后面的元素会填补它原来的位置。

一、主体不同

1、相对定位：是设置为相对定位的元素框会偏移某个距离。

2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。

二、特点不同

1、相对定位：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

2、绝对定位：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

相对定位指的是相对于上一层的div来说的，所有的距离都是相对于本div的外层div。而绝对定位指的是任何时候都是以页面的边来定位的

之前一直搞不明白html中positon:relative; 和 position:absolute;这两个属性。这里记录一下。

理论解释：

相对定位：该元素相对于自己原有位置，偏移一定距离。相对的是自己。

绝对定位：该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了position属性。从最近的父元素开始找，直到找到body位置为止。

好吧，光看理论解释可能有点懵逼，还是来个小demo吧，直观。。。

1）相对定位

对应的css样式：

        #test{

            height: 300px;

            width: 300px;

            background: gray;

        }

        /*p标签本身会有padding和margin值*/

        p{

            margin: 0px;

            padding: 0px;

        }

        .p1{

            height: 100px;

            width: 100px;

            background: blue;

        }

        .p2{

            height: 80px;

            width: 80px;

            background: red;

        }

运行后效果是：(这时没有设置position属性呢)

然后，给p1设置相对定位

        .p1{

            height: 100px;

            width: 100px;

            background: blue;

            /*设置相对定位*/

            position: relative;

            /*相对于左边偏移20px,相对于上边偏移20px*/

            left: 20px;

            top:20px;

        }

运行后效果如下： 

ok了，相对定位就是这样啦，需要注意的是，p1虽然偏移了，但是同时它还占着它原来的位置。

2）绝对定位

再增加一個div

相应的样式

        #test2{

            height: 300px;

            width: 300px;

            background: pink;

        }

        .p3{

            height: 100px;

            width: 100px;

            background: green;

            /*設置绝对定位*/

            position: absolute;

            left: 30px;

            top: 30px;

        }

        .p4{

            height: 90px;

            width: 90px;

            background: gold;

        }

同時將p1的相对定位去掉。这时候效果如下：

然後給p3設置绝对定位：

    .p3{

            height: 100px;

            width: 100px;

            background: green;

            /*設置绝对定位*/

            position: absolute;

            left: 30px;

            top: 30px;

        }

        .p4{

            height: 90px;

            width: 90px;

            background: gold;

        }

觉得效果是怎樣呢？因爲test2是p3的父元素，所以猜測效果是p3相对于test2，向左偏移30px，向下偏移30px。那麽究竟是不是這樣呢？？运行后效果如下：

我擦，跟想的不一樣啊。。。

別急，这是因为：虽然test2是p3的父元素，但是test2沒有設置position屬性，所以p3就會繼續向上找，找test2的父元素，直至到body为止。所以就出現了如上效果。那麽，如果想p3相对于test2，向左偏移30px，向下偏移30px，只需給test2設置position屬性即可。

        #test2{

            height: 300px;

            width: 300px;

            background: pink;

            position: relative;

        }

效果如下： 

ok啦，這就是绝对定位。相对的是父元素。

需要注意的是：绝对定位的元素不占原來的位置，這就是p4移動到test2左上角的原因。

相对定位和绝对定位是定位的两种表现形式，区别如下：

一、主体不同

1、相对定位：是设置为相对定位的元素框会偏移某个距离。

2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。

二、特点不同

1、相对定位：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

2、绝对定位：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

相对定位和绝对定位是定位的两种表现形式，区别如下：

一、主体不同

1、相对定位：是设置为相对定位的元素框会偏移某个距离。

2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。

二、特点不同

1、相对定位：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

2、绝对定位：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

一、主体不同

1、相对定位：是设置为相对定位的元素框会偏移某个距离。

2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。

二、特点不同

1、相对定位：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

2、绝对定位：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。