绝对定位的基准是最近的已定位祖先元素（position为relative、absolute、fixed或sticky），无则回退到视口；仅设position: relative即可锁定父级，因其满足“已定位”条件且不脱离文档流。
绝对定位的基准点到底是谁？
绝对定位（position: absolute）的偏移基准，不是浏览器窗口，也不是最近的 position: relative 元素——而是**最近的已定位祖先元素**（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）。如果没有这样的祖先，才回退到初始包含块（通常是视口）。
所以，“用 position: relative 锁定父级”本质是人为制造一个已定位祖先，让子元素的 top/left 等值相对于它计算，而非飘到页面顶端左角。
为什么只加 position: relative 就够了？
position: relative 本身不改变元素在文档流中的位置（即不触发重排位移），但它满足“已定位祖先”的判定条件。这是最轻量、最安全的锁定方式。
- 不要用
position: absolute或fixed给父级设定位——会把它拉出文档流，破坏布局结构 - 避免加
top/left等偏移值——除非你真想微调父容器自身位置，否则纯属干扰 -
position: sticky在父级上行为不稳定（依赖滚动上下文），不适合作为定位基准
常见错误：父级没生效，子元素还是相对视口定位
典型现象：div.parent { position: relative; } 写了，但子元素 div.child { position: absolute; top: 10px; left: 20px; } 依然贴着浏览器左上角。
可能原因：
- 父级实际被其他 CSS 覆盖（比如某处写了
position: static !important）——用开发者工具检查 computedposition值是否真为relative - 父级高度为
0且无内容/边框/内边距，导致视觉上“看不见”，但定位逻辑仍成立；可临时加outline: 1px solid red确认边界 - 存在中间层祖先也设置了
position（比如某个包裹section用了absolute），它成了更近的已定位祖先，子元素就相对于它定位了
嵌套绝对定位时的层级与堆叠上下文影响
当多个 position: relative 父级嵌套，且某一层还设置了 z-index，就会创建新的堆叠上下文。此时子元素的 z-index 是相对于该上下文生效，而不是全局。
例如：
.layer1 { position: relative; z-index: 1; }
.layer2 { position: relative; z-index: 2; }
.child { position: absolute; z-index: 999; }
这个 .child 的 z-index: 999 只在 .layer2 的堆叠上下文中有效，不会盖过 .layer1 外的其他元素——除非 .layer2 本身在 .layer1 上方。
真正需要跨上下文控制层级时，得调整父级的 z-index，而不是只动子元素。
父级加 position: relative 看似简单，但它的存在与否、是否被覆盖、是否被更近的定位祖先截获，都会让绝对定位行为彻底改变。调试时优先确认 computed 样式里的 position 和 z-index 层级链，比反复改子元素更高效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
