目录
一、定位属性简介
二、各属性值的具体功能
1. relative
2. absolute
3. fixed
三、三种定位属性的效果总结
参考资料：https://www.bilibili.com/video/BV18J411S7tZ?p=4
position属性是用于指定一个元素的定位方法类型的属性，它的取值有：static（默认类型）、relative、absolute、fixed。当position属性的值不为<code>static</code>（即不为默认）时，我们可以添加：<code>top</code>、<code>bottom</code>、<code>left</code>和<code>right</code>属性对当前元素进行具体的定位，并且可以使用<code>z-index</code>来设置层级的上下关系。
首先先搭建出测试框架：
对应的css：
当前的效果为：
此时我们将<code>#box2</code>（绿色div）的<code>position</code>值改为relative，并为其设置<code>top</code>和<code>left</code>属性：
此时的效果为：
可以发现，当定位属性值为relative时，元素发生偏移的参考点为该元素自身。此外虽然元素移动到了新的位置，但是元素仍然会占有原有的位置，这也是为什么蓝色div没有排到上面。
我们的测试框架仍与上面相同，初始的效果如下：
此时为<code>#box2</code>开启绝对定位（<code>position: absolute</code>）：
效果如下：
可以发现蓝色div不见了，此时检查元素：
可以发现原来蓝色方块还在，只是放置到了绿色方块的下面。这是因为当元素启用绝对定位是，该元素就和浮动类似，不会占用原有的空间了，因此后面蓝色的方块就会排列在了红色方块的下面。
此时我们再设置对应的偏移：
可以发现此时绿色方块偏移的参照点为浏览器的（0,0）点，也可以理解为body元素的最左上角。
但absolute定位并不是什么情况下参照点都为浏览器的（0,0）点的，先编写以下场景：
添加css：
当前效果：
此时为son添加absolute定位，并且设置一定的偏移量：
显然，它当前的参照点还是浏览器页面的（0,0）点。
此时为<code>#father</code>元素也添加一个定位（除了<code>static</code>的定位都可以）：
此时可以发现<code>#son</code>元素的参考点变成<code>#father</code>元素了。
因此，当使用absolute定位时，元素的参考点为：该元素向外层寻找最近的有添加定位的父级元素：
找到了则参考点为该父级元素的左上角
否则参考点设置为body元素的左上角（即浏览器页面的(0,0)点）。
当设置了fixed后元素将固定在窗口的一个位置，即相对整个窗口的位置不再发生变化。
具体例子：
测试效果：
此时无论如何拖动页面，这个侧边条依然会保持在窗口的左边不动，因此使用这个定位可以制作悬停效果。
定位属性值
效果
relative
元素发生偏移的参考点为该元素自身，虽然元素发生了移动，但是元素仍然会占有原有的物理位置
absolute
元素不会占用原有的物理空间，且偏移参考点为最近的有添加定位的父级元素，如果找不到则为body元素（即浏览器(0,0)点）
fixed
元素将固定在窗口的一个位置，即相对整个窗口的位置不再发生变化
tips：只有添加了定位的元素中，top、bottom、left、right和z-index这些定位属性才会生效。