CSS定位包含五种方式：static为默认定位，不支持偏移；relative相对原位置移动但占位不变；absolute脱离文档流，相对于最近已定位祖先元素定位；fixed相对于视口固定，不随滚动移动；sticky在滚动阈值前后切换相对与固定定位，常用于吸附效果。
如果您在设计网页时需要精确控制元素的位置，CSS 定位提供了多种方式来实现这一目标。通过设置不同的定位属性，可以让元素脱离正常的文档流或相对于特定参照物进行摆放。
本文运行环境：MacBook Pro，macOS Sonoma
一、static 定位
static 是元素的默认定位方式，元素会按照正常的文档流进行排列，不会受到 top、bottom、left、right 属性的影响。
1、所有块级元素和行内元素在未设置 position 属性时都处于 static 状态。
2、即使为元素设置了偏移值，也不会产生任何效果，因为 static 不支持定位偏移。
二、relative 定位
relative 定位使元素相对于其在正常文档流中的原始位置进行偏移，但元素原本占据的空间仍然保留。
1、设置 position: relative 后，可以使用 top、right、bottom、left 属性移动元素。
2、元素的偏移不会影响其他元素的布局，页面中其他内容仍按该元素未移动时布局。
三、absolute 定位
absolute 定位将元素从正常文档流中完全移除，并相对于最近的已定位祖先元素进行定位；若无则相对于初始包含块（通常是视口）。
1、元素不再占据原始文档流中的空间，可能导致其他元素“上移”填补空缺。
2、定位参考点是最近的 position 值为 relative、absolute 或 fixed 的祖先元素。
让 macOS 自动化像说话一样简单 —— 用代码控制你的 Mac，无需学习 AppleScript 系统要求 macOS 14+ (Sonoma) Python 3.9+ 需要开启：辅助功能 + 屏幕录制权限
3、可通过 top、right、bottom、left 精确设定距离参考边界的偏移量。
四、fixed 定位
fixed 定位使元素相对于浏览器视口进行定位，无论页面如何滚动，元素始终停留在设定的位置。
1、常用于创建始终显示在屏幕某位置的导航栏或按钮。
2、元素脱离文档流，不随页面滚动而移动。
3、定位基准为视口，即使存在已定位的父元素也不受影响。
五、sticky 定位
sticky 定位是 relative 和 fixed 的结合体，元素在滚动到特定阈值前表现为相对定位，之后变为固定定位。
1、必须指定一个阈值（如 top: 0），否则 sticky 不会生效。
2、元素在未达到设定的临界点时正常流动，一旦满足条件则“粘”在视口中指定位置。
3、常见于表格标题或侧边栏的吸附效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
