DevTools 的 Computed 面板可直接查看 width 或 top 的 reference box，明确其计算依据；若显示 viewport 或 initial containing block，说明祖先链中无定位元素；父元素加 position: relative 失效常因被更近定位祖先“劫持”、display: contents/none、表格元素默认不创建包含块，或 transform 等属性意外创建新包含块；left/right 同时设置仅触发 width: auto 拉伸，参考对象不变，数值意义完全依赖 reference box 边界。
直接看 DevTools 的 Computed 面板里 width 或 top 的 reference box 是谁，比猜快十倍。
用 Chrome DevTools 看 reference box
浏览器不会告诉你“参考了哪个父元素”，但会明确显示尺寸和偏移量的计算依据：
- 打开 Elements 面板，选中那个
position: absolute元素 - 切到 Styles → Computed，搜索
width或top - 在对应属性值下方找
reference box（或类似描述，如 “containing block: #header”）—— 这就是它真正参考的祖先 - 如果显示
reference box: viewport或initial containing block，说明整条祖先链里没有一个position为relative、absolute、fixed或sticky的元素
为什么父元素加了 position: relative 还不生效？
常见不是“没加”，而是“被劫持”了——参考对象不是你认为的那个父级：
- 检查祖先链中是否存在更近的已定位元素：比如祖父设了
position: absolute，那子元素就会跳过父级，直接参考祖父 - 父元素本身有
display: contents或display: none，会导致它不构成包含块 - 父元素是
<table>、<code><td> 等特殊表格元素，它们默认不创建包含块（除非显式设 <code>position: relative） - 父元素用了
transform、filter、will-change等属性，某些浏览器版本下会意外创建新的包含块 - 若参考对象是
#header，则left: 0; right: 0;让元素填满#header的宽度 - 若参考对象是
viewport，那它就填满整个屏幕，跟父容器毫无关系 - 这个拉伸行为在 IE8 及更早版本中不支持，
left + right不会触发自动宽度计算
left 和 right 同时出现时 width 自动拉伸，但参考对象不变
很多人以为 left: 0; right: 0; 能“强制绑定父容器”，其实只是触发了 width: auto 的拉伸行为，参考对象仍是原来的包含块：
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的点：参考对象只由祖先的 position 值决定，和 DOM 层级“看起来像不像父级”无关；而 left/right/top/bottom 的数值意义，完全依赖于这个 reference box 的四条边——没确认 reference box 就调偏移量，等于蒙眼开车。
