浅谈 relative 与 absolute

• relative 与 absolute 属于 position 中的属性，positon除了这两种属性外，还有另外两种属性分别是 static 和 fixed。此处我们暂且不谈后两种属性，来谈谈 relative 与 absolute，让我们现在开始吧！

absolute

absolute 顾名思义在英文中可译为绝对的，它在CSS中所表现的属性也是如此称为绝对定位；

格式如下：

    position:absolute;

好了，现在让我们来讲讲它的具体表现形式吧！！

首先我们看一段CSS代码，首先我们先定义两个盒子，分别命名为 red 、 blue；

<div class="red"></div>
<div class="blue"></div>

然后给red和blue两个盒子添加相应的属性

.red{
        background-color: red;
        width: 100px;
        height: 100px;
    }
.blue{
        background-color: blue;
        width: 100px;
        height: 100px;
    }

当我们没有给盒子设置位置属性时，两盒子排版如下所示：(在最左上角显示)

图一：

从图中可以看出两个盒子共占高200px，且两个盒子将整个宽给占满了。

接下来我们给red盒子加上absolute绝对定位试试：

图二：

图三：

将上面几张图进行对比，我们不难发现：从图二来看当red盒子添加上position属性时，其上的元素覆盖只覆盖到了red盒子（100*100）。让我们再看图三的blue盒子，其上显示的是（div:blue 100 X 100）,那为什么我们看不到blue这个盒子呢？这就关于到了层级关系了，在这我们就不过多赘述了。 又有人会产生疑惑了？为什么这两个盒子会发生重叠呢？这就是absolute的一个特性了：

当用上absolute时，该盒子已经脱离了文本行，从文本流中完全删除，此刻我们将代码修改如下： 代码如下：

.red{
            background-color: red;
            width: 100px;
            height: 100px;
            position: absolute; 
            left:50px;
            top: 50px;  //通过left、right、top、bottom可以对加有position属性的盒子进行位置修改
    }
.blue{
            background-color: blue;
            width: 200px;
            height: 200px;
    }
.yellow{
    background-color: yellow;
    width: 100px;
    height: 100px;
    }


<div class="yellow"></div>
<div class="blue"><div class="red"></div></div> //此处只贴出盒子定义代码

效果如下：

图四：

从图四我们又能看出什么呢？

用left、right修改red盒子位置，此时盒子位置会做出相应调整（以左上角为基点），那我们该如何让他以其他盒子进行位置调整呢？

如果我们在yellow盒子中添加position:apsolute;属性，此时页面又会怎么显示呢？

图五：

在yellow盒子中添加position:apsolute;元素后，该盒子从文本流中完全删除（在页面完全不占位置），所以blue盒子就会向上移动（blue成为第一个盒子）

如果在blue盒子中添加该元素呢？页面又会发生什么变化？（我们将yellow盒子中的position属性删除）

图六：

我们会发现red盒子好像发生了移动，其相对blue盒子产生了位置变化，这又是为什么？

其实我们在定义盒子属性时，每个盒子都有一个默认position属性，其是static（没有定位），

position：apsolute;的另一个特性就是：加了position：apsolute;后 top和left是相对于离它最近且不是static定位的父元素来定位的。

reletive

reletive 顾名思义相对的，它在CSS中所表现的属性也是如此称为相对定位；

格式如下：

position:reletive;

废话不多说，先贴上定义代码：

.red{
    background-color: red;
    width: 100px;
    height: 100px;
}
.blue{
    background-color: blue;
    width: 200px;
    height: 200px;
    position: relative;
    }
.yellow{
    background-color: yellow;
    width: 100px;
    height: 100px;
    }

<div class="yellow"></div>
<div class="blue"><div class="red"></div></div>  //盒子定义

此处我们在blue盒子内添加position: relative;属性。

效果如下：

图七：

乍一看！！！

好像跟不加position: relative;属性，页面显示相同。 我们再给blue盒子添加一些属性（top: 50px;left: 50px;）

.blue{
    background-color: blue;
    width: 200px;
    height: 200px;
    position: relative;
    top: 50px;
    left: 50px;
}

此刻页面会发生变化嘛？

答案是肯定会的。

图八：

这里我们要补充一点：

• 在未对盒子使用position或position:static时，使用left、right、top、bottom是不能对盒子的位置做出调整的

从图中我们不难看出：blue盒子是相对原来blue盒子（图七）做出相应的位置改变的。这就引申出relative的特性了：

在使用relative后用left、right、top、bottom后，盒子是相对原本的位置做出相应改变的

试想一下如果将这两个属性加到同一个html文件中呢？

我们blue盒子和yellow盒子的属性不改变，只在red盒子中添加position:absolute;并加上left、top属性：

.red{
    background-color: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}
.blue{
    background-color: blue;
    width: 200px;
    height: 200px;
    position: relative;
    top: 50px;
    left: 50px;
    }
.yellow{
    background-color: yellow;
    width: 100px;
    height: 100px;
    }

<div class="yellow"></div>
<div class="blue"><div class="red"></div></div>

页面变为：

图九：

看图可知，（子元素）red盒子是相对父元素（blue盒子）来移动的。

所以一般要使子元素发生移动时，我们需在父元素中添加position:relative;属性。在需要改变默认位置的子元素中添加position:absolute;属性。

总结

absolute：

1. 当用上absolute时，该盒子已经脱离了文本行，从文本流中完全删除。
2. 加了position：apsolute;后  top和left是相对于离它最近且不是static定位的父元素来定位的。

relative：

1. 元素仍然处于文档流中
2.在使用relative后用left、right、top、bottom后，盒子是相对原本的位置做出相应改变的

小白一枚，还望各位大佬指正