层级关系为：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
```<!--more-->
效果图：
---
为改变参照物（橘色框）后的效果
层级关系为：
```html
<div ——————————— position:relative;最近的祖先定位元素，参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
@前端进阶之旅: 代码已经复制到剪贴板
效果图：
参照物为最顶级的元素情况。
层级关系为：
<div ———————————没有设置为定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
@前端进阶之旅: 代码已经复制到剪贴板
效果图：
# 导图总结
