HTML中position:relative和absolute的定位

前言

**这篇文章主要是以言简意赅的方式来辨析relative定位和absolute定位。

1. 首先一定要明确：html“本身”其默认的定位方式是什么？

其默认方式（也就是在css中对相应的盒子的position不做任何操作）是static;
其位置的安排方式简单的来说就是从上到下，且靠左；

标准解释如下：

自上而下分成一行行，并在每行中按从左至右的顺序排放元素。

代码以及效果图如下所示

2. 下面我们来说明relative定位：

相对而言，relative的定义理解简单一些，我们先给出结论：

relative定位是相对于其自身原来所在的位置所进行的定位；（可能有些拗口，下面我们直接看效果。）

（第二层的自身原来所在的位置，请看本文中的第一幅图。）
这里，我将第二层左移并且下移了，同时为了还为其加上了边框。通过边框我们可以发现，其原来的位置已经没有边框了，但是第三层却没有自动的向上面移动？？？！！这就意味着虽然第二层不在原处了，但是其“位置”却不会被“释放”。同时因为我将其向下移的缘故，它甚至可能会盖住其他的盒子。

3. 最后:绝对定位

首先要明确：absolute定位的定义：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

“如果某个要定位成absolute盒子一直往上找其父级元素，发现都是static定位，怎么办呢？”
这个时候，最后选择的父级元素就是最后找寻的那一个父级元素。

这里第三层的盒子之后唯一的父元素，那就是body。虽然body的定位是static，body就是它的最后一个父元素，所以没办法，只能选择body了。
改动一下：将第二层当作第三层的“父亲”，会怎么样呢？

因为我已经将第二层的定位设置为relative了，即已经不是static。
那么第三层定位为absolute向上找第一个非static定位的父元素时，找到的就是第二层。
所以设置的top:20px;是相对于第二层的。

至此，解析大概就是这样啦。

遇事不决，可问春风。