静态定位：
静态定位是默认值，就是之前认识的标准流。 代码：postion:static 静态定位不能通过方向偏移值来改变。
相对定位：
自恋型定位，相对于自己之前的位置进行移动。 代码：postion:relative
- 需要配合访问属性来移动
- 相对于自己原来的位置进行移动
- 在页面中占位置→没有脱标
应用场景 ：配合绝对定位组cp（子绝父相），用于小范围的移动。
绝对定位：
拼爹型定位，相对于非静态定位的父元素进行移动。
代码：position:absolute
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置→已经脱标
应用场景 ：配合相对定位组CP（子绝父相）
绝对定位相对于谁移动？
- 祖先元素中没有定位 → 默认相对于浏览器进行移动
- 祖先元素中有定位 → 相对于最近的 有定位 的祖先元素进行移动
固定定位：
相对于浏览器窗口进行定位，脱离原来的文档流。
代码：position:fixed
子绝父相
含义： 子元素用绝对定位，父元素用相对定位。
应用场景： 让子元素相对于父元素进行自由移动。
好处： 父元素是相对定位，对网页布局影响最小。
子绝父绝特殊场景：
场景： 在使用子绝父相的时候，发现父元素已经有相对定位了，此时直接子绝即可！
原因： 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局。
设置偏移值：水平和垂直就近各取一个
水平方向：
- left：数字 px 距离左边的距离
- right：数字 px 距离右边的距离
垂直方向：
- top：数字 px 距离上边的距离
- bottom：数字 px 距离下边的距离
基本写法：
代码语言：javascript复制.blue {
/* 设置定位方式 */
position: absolute;
top: 150px;
left: 150px;
background-color: blue;
}
