relative定位的参照物是元素自身在文档流中的原始位置，而非父容器或视口；它仅创建偏移锚点且不脱离文档流，设position: relative但无top/left等值则无视觉变化。
relative 定位到底“相对谁”？
relative 的偏移参照物是它自己原本在文档流中的位置，不是父容器，也不是视口。这点最容易误解——很多人以为设了 position: relative 就能当 absolute 的“定位上下文”，其实它只是“给自己加个偏移锚点”，不改变文档流占位。
常见错误现象：top: 20px 没反应？可能父元素没设 height 或内容塌陷，导致 relative 元素视觉上“没动”，其实是动了但被遮住或挤出视口外。
- 必须显式设置
top/left等偏移值才生效，只写position: relative不会触发任何位移 - 它仍占据原来文档流位置，后续元素不会填补空缺
- 想让子元素用
position: absolute相对它定位？没问题，但前提是它得有“定位上下文身份”——只要设了position: relative（哪怕没偏移），就自动成为最近的已定位祖先
absolute 元素消失或错位的三个常见原因
absolute 脱离文档流后，定位基准取决于“最近的已定位祖先”，找不到就回退到初始包含块（通常是视口）。这不是 bug，是标准行为，但常被当成 bug 处理。
典型错误现象：div 突然飞到页面左上角、或者整个不见了——大概率是父容器既没设 position，也没设宽高，导致 absolute 元素按视口定位，又因没设 top/left 默认为 0，于是叠在左上角；或者父容器高度为 0，absolute 元素溢出不可见。
立即学习“前端免费学习笔记（深入）”；
- 检查父级是否设置了
position: relative（或其他非static值），否则它会一路向上找，直到 -
width和height不继承，absolute 元素若无内容或未显式设尺寸，可能坍缩成 0×0 - 如果父容器用了
transform（比如scale(1)），也会创建新的包含块，影响 absolute 定位结果，这个容易被忽略
fixed 定位为什么在 iOS Safari 里“粘不住”？
fixed 在移动端特别是旧版 iOS Safari 中行为不稳定，根本原因是它依赖浏览器对“视口”的理解，而早期 iOS WebKit 把 fixed 元素当作普通 absolute 处理，尤其在页面滚动、软键盘弹出、地址栏收放时，定位基准会临时漂移。
使用场景：顶部导航栏、返回按钮、悬浮客服入口。这些本该固定在屏幕某处，但在 iOS 上常出现“跟着滚”或“闪一下再归位”。
- iOS 15+ 基本修复，但 iOS 12–14 仍需规避：避免在
body直接设overflow: hidden或用transform，这会让 fixed 失效 - 不要依赖
vh单位做 fixed 布局高度，Safari 的100vh在地址栏展开/收起时会跳变 - 更稳妥的做法是用
position: sticky替代部分 fixed 场景（比如表头、侧边栏），它兼容性更好且行为更可预测
relative + absolute 组合布局时，z-index 不生效怎么办？
z-index 只对“定位元素”（position 为 relative、absolute、fixed 或 sticky）生效，但它真正起作用的前提是：这些元素处于同一层叠上下文（stacking context）。而 z-index 本身就会创建新的层叠上下文——这就是陷阱所在。
典型错误现象：两个都设了 z-index 的 absolute 元素，层级关系和预期相反；或者父元素设了 z-index: 10，子元素设 z-index: 999，结果还是被盖住。
- 检查父容器是否无意中创建了层叠上下文：比如设了
opacity: 0.99、transform: translateZ(0)、filter: blur(1px)，这些都会隐式创建新层叠上下文，把子元素的z-index锁死在内部 - relative 元素若设了
z-index，它就成为其子 absolute 元素的“层叠容器”，子元素的z-index只在这个容器内比较 - 没有显式
z-index的定位元素，默认层叠等级为auto，等同于 0，但它们之间仍按 HTML 顺序堆叠
position，可能要连带查三处渲染逻辑。 
