绝对定位的参考系是最近已定位祖先而非直接父元素；父元素需设position: relative等才能成为定位上下文，且top/left起点为padding box左上角。
绝对定位的参考系不是“父元素”，而是“最近已定位祖先”
很多人写 .child { position: absolute; top: 10px; left: 20px; }，本意是让子元素离父容器左上角 20px/10px，结果却贴到了浏览器左上角——根本原因不是代码写错了，而是父元素没成为“定位上下文”。position: static（默认值）不构成定位上下文，哪怕它是直接父级，absolute 子元素也会一路往上找，直到遇到 position: relative、absolute、fixed 或 sticky 的祖先，或者干脆落到视口（initial containing block）。
- ✅ 正确做法：给父容器加
position: relative（哪怕不设top/left） - ⚠️ 错误假设：“有父子关系 = 自然成为参考系”
- ? 隐式陷阱：父元素若带
transform（如transform: translateZ(0)）、filter或will-change，也会悄悄创建定位上下文——调试时要检查这些属性，不想要就显式写transform: none
top/left 的起点是 padding box 左上角，不是 border 或 margin
当父元素设置了 padding，比如 .container { position: relative; padding: 20px; }，那么 .child { position: absolute; top: 0; left: 0; } 的左上角，会精确对齐到容器内容区（即 padding box）的左上角，也就是距离容器 border 内侧 20px 的位置。这不是 bug，是 CSS 规范明确定义的。
- 如果希望子元素紧贴容器 border 内侧，父元素不要设 padding，或用负偏移抵消：
left: -20px - 如果父元素有 border，而你希望子元素从 border 外侧开始算，那就不能依赖
absolute+top/left，得换思路（比如用margin或transform） - 注意：这个起点规则对所有已定位祖先都生效，不只限于直接父级
“子绝父相”不是教条，但它是规避塌陷和错位最稳的组合
为什么推荐 parent: relative + child: absolute？因为 relative 不脱离文档流，父容器能正常撑开高度、参与布局；而 absolute 子元素完全脱离流，不会干扰内部其他子元素排版——比如右上角徽章、下拉菜单、模态框遮罩层，全靠这套组合实现干净隔离。
- ❌ 避免
parent: absolute：父元素一绝对定位，自身高度就塌陷，后代无法基于它做可靠布局 - ❌ 避免
parent: static+child: absolute：子元素基准飘忽，响应式或嵌套组件中极易错位 - ✅ 安全兜底：哪怕父元素不需要视觉偏移，也加一句
position: relative—— 它零副作用，只干一件事：提供定位锚点
z-index 和堆叠上下文会让“谁在上面”变得不可直觉
z-index 只在同一个堆叠上下文（stacking context）内有效。如果父元素自己创建了新的堆叠上下文（比如加了 opacity: 0.99、transform、filter 或显式 z-index），那它的子元素的 z-index 就只在这个小世界里比大小，再大也压不住外部同级元素。
立即学习“前端免费学习笔记（深入）”；
- 现象：明明写了
z-index: 9999，还是被盖住 → 检查父级是否无意触发了堆叠上下文 - 调试技巧：浏览器开发者工具里看“Layers”面板，或临时给疑似父级加
outline: 1px solid red确认边界 - 简单原则：需要跨层级控序时，尽量把
z-index提到公共祖先上，而不是分散在深层子元素
position: relative 这行看似多余的代码。 
