绝对定位的参考容器是最近的已定位祖先元素，即position为relative、absolute或fixed的祖先元素，未找到则回退到<body>。
绝对定位的参考容器是哪个元素
绝对定位元素不是固定相对于父元素或 body，而是找「最近的已定位祖先元素」——也就是 position 值为 relative、absolute 或 fixed 的那个祖先。没找到就落到 <body> 上。
常见错误现象：top: 0 写了却没贴到父容器顶部，往往是因为父容器还是默认的 position: static，浏览器继续往上查，最后以整个视口为基准。
- 检查 computed style 中的
offsetParent，它直接告诉你当前参考的是谁 - 不要依赖 DOM 层级“看起来是父级”，要确认它真有非
static的position - 如果用 JS 动态插入 absolute 元素，记得确保它的定位上下文在插入前已就绪
为什么加了 position: relative 就能控制定位范围
position: relative 本身不移动元素，但它把该元素变成一个「定位上下文（containing block）」，让子级的 absolute 有了锚点。这是最常用也最稳妥的配对方式。
使用场景：下拉菜单、tooltip、弹窗遮罩层——都需要精确贴着触发按钮定位，而不是飞到页面左上角。
立即学习“前端免费学习笔记（深入）”；
- 哪怕父容器不需要偏移，也要显式写
position: relative - 避免给父容器设
position: absolute，否则它自身脱离文档流，可能破坏布局结构 - 多个嵌套层级中，只给直接包裹的容器设
relative，别层层都加
top/left 百分比值是相对于谁计算的
百分比值的参照对象，和定位参考容器一致：如果参考容器是 <body>，就按视口宽高算；如果参考容器是某个 position: relative 的 div，就按那个 div 的宽高算。
容易踩的坑：父容器没设宽高，又用 width: 50% + position: absolute，结果宽度为 0——因为参考容器内容高度塌陷，百分比失去计算基础。
- 确保参考容器有明确的
width和height（或至少有内容撑开） - 用
max-width或min-width配合百分比，防止极端缩放下溢出 - 注意
box-sizing：默认content-box下，百分比只含 content，不含 padding/border
脱离文档流后，哪些行为会意外失效
设了 position: absolute 后，元素从文档流中“消失”，但它的视觉表现和交互逻辑仍受其他属性影响，容易误判原因。
典型现象：文字看不见了、点击不到、z-index 不生效——其实不是样式写错，而是布局前提变了。
-
margin失效：absolute 元素的 margin 不再参与外边距合并，但依然存在（可用来微调位置） -
vertical-align失效：它只对 inline/inline-block 元素起作用，absolute 是块级盒模型 -
z-index生效但受限：只在同一个 stacking context 内比较，父容器没设z-index时，子元素再大也压不过隔壁区块
absolute 前，先看一眼 offsetParent，比反复调 top 值靠谱得多。 
