相对定位:相对于自己之前的位置进行移动.
代码：position:relative
特点：
-
需要配合方位属性实现移动
-
相对于自己原来位置进行移动
-
在页面中占位置 → 没有脱标
应用场景：
-
配合绝对定位组CP（子绝父相）
-
用于小范围的移动
绝对定位:相对于非静态定位的父元素进行定位移动
代码：position:absolute
特点：
-
需要配合方位属性实现移动
-
默认相对于浏览器可视区域进行移动
-
在页面中不占位置 → 已经脱标
➢ 应用场景：
- 配合绝对定位组CP（子绝父相）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.father {
position: relative;
width: 800px;
height: 300px;
background-color: red;
}
.son {
position: absolute;
right: 30px;
top: 10px;
width: 200px;
height: 100px;
background-color: blue;
}
.box {
width: 900px;
height: 300px;
background-color: brown;
}
