position: relative 不脱离文档流，仅在原位偏移；它本身不提供锚点，需配合子元素 absolute 才形成定位参考系。
position: relative 是什么，又不是什么
position: relative 不会让元素脱离文档流，它只是“在原位置基础上偏移”，后续元素仍按它没动过的位置来排布。很多人误以为加了 relative 就能当“定位锚点”用，其实它本身不提供锚点能力——真正起锚点作用的是它的子元素设了 position: absolute 且父级有 relative（或 absolute/fixed）时，才以该父级为参考系。
常见错误现象：top、left 设了但没反应？检查是否漏写了 position: relative；写了却没偏移效果？可能是父容器高度塌陷或被其他样式覆盖。
- 必须显式声明
top/right/bottom/left才会触发偏移，只写position: relative不会改变布局 - 偏移后元素原本占位仍在，可能造成重叠或留白，需留意
z-index控制图层 - 不要对
body或全屏容器滥用relative，容易引发嵌套定位混乱
position: absolute 的定位基准怎么确定
position: absolute 会让元素完全脱离文档流，并相对于**最近的已定位祖先元素**（即 position 值为 relative、absolute 或 fixed 的祖先）进行定位；若找不到，则回退到初始包含块（通常是视口）。
性能影响：频繁变更 absolute 元素的 top/left 会触发重排，动画场景建议改用 transform: translate()。
立即学习“前端免费学习笔记（深入）”；
- 祖先元素仅设
position: static（默认值）不构成定位上下文，哪怕写了top: 0也无效 - 如果父级是
relative但没设宽高，子元素absolute定位可能“飞走”，因为父级实际尺寸可能为 0 -
inset属性（如inset: 10px）可替代top/right/bottom/left四值写法，但兼容性限于 Chrome 89+、Firefox 103+
relative 和 absolute 搭配使用的典型结构
这是最常用于下拉菜单、弹窗、气泡提示等组件的基础模式：父容器用 relative “打桩”，子元素用 absolute “挂载”。
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
}
关键细节：
-
top: 100%表示从父元素底部开始定位，比写死像素更健壮 -
margin-top用于微调间距，避免紧贴父底边；不能用top: calc(100% + 4px)，因calc()在absolute中对百分比解析依赖父级高度，而父级高度可能由内容撑开，不稳定 - 若需右对齐下拉项，用
right: 0而非left: auto，后者不生效
fixed 和 sticky 的定位行为差异
position: fixed 相对于视口固定，滚动不跟随；position: sticky 是 conditional fixed —— 在滚动到阈值前表现为 relative，越过阈值后表现如 fixed。两者都不受父级 relative 影响。
容易踩的坑：
-
sticky必须配合top（或bottom）才生效，只写position: sticky等同于static -
sticky的父容器不能有overflow: hidden/auto/scroll，否则定位上下文被截断，失效 -
fixed元素的z-index默认高于普通文档流，但若父级有transform或filter，会创建新层叠上下文，可能压住fixed元素
relative + absolute 组合看似简单，但一旦嵌套三层以上或混入 transform，定位参考系就容易错乱。调试时优先检查祖先链中第一个非 static 的 position 值，而不是盯着目标元素本身。 
