定位属性：position，搭配top/left/right/bottom偏移使用
一、静态定位 static
- 默认值，元素正常文档流排布
- 偏移属性无效
position: static;
二、相对定位 relative
- 参照物：自身原始位置
- 特点：保留原有占位，不脱离文档流
- 偏移后仅视觉移动，原位置依旧占用
position: relative;
top: 10px;
left: 20px;
三、绝对定位 absolute
- 参照物：最近已定位的父级元素
父级无定位则参照浏览器窗口 - 特点：脱离文档流，不保留占位
- 常用搭配：父级设relative，子级设absolute精准定位
/* 父容器 */
.father{position: relative;
}
/* 子元素 */
.son{position: absolute;right: 0;bottom: 0;
}
四、固定定位 fixed
- 参照物：浏览器视口窗口
- 特点：脱离文档流，滚动页面位置始终不变
- 多用于悬浮按钮、导航栏
position: fixed;
bottom: 30px;
right: 30px;
五、锚点跳转
- 锚记标签设置id
<div id="mao1">锚点区域</div>
- 跳转链接绑定#加id名
<a href="#mao1">点击跳转到对应位置</a>
- 页面间锚点：
页面地址#id名
速记区分
- relative：占位置，挪自己
- absolute：不占位，找定位父级
- fixed：不占位，固定屏幕不动
- 锚点：id绑定#，实现页内跳转
注：文章部分内容使用ai润色，主体为课堂笔记