绝对定位与相对定位
Created at 2016-07-30 Updated at 2017-01-06 Category Front-End
层级关系为：
效果图：
参照物为最顶级的元素情况。
层级关系为：
效果图：
导图总结
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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
1
2
3
4
5
6
<div ———————————没有设置为定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3