要使 absolute 子元素相对某父容器定位，必须给该父元素显式设置 position 为 relative/absolute/fixed/sticky；relative 最常用，它不改变文档流却创建新定位上下文。
position 属性的嵌套规则：父元素没定位，子元素的 top 白写
子元素设了 position: absolute，但 top: 20px 没生效？大概率是它的 ** 最近一个已定位祖先元素 ** 根本不存在——也就是所有父级都用了默认的 position: static。此时 absolute 会直接相对于初始包含块（通常是视口）定位，和你想“嵌套在某个卡片内”完全脱节。
要让 absolute 子元素相对某一层父容器定位，必须显式给该父元素设置 position 为 relative、absolute、fixed 或 sticky（哪怕只是 position: relative 且不设偏移值）。
-
position: relative是最常用的选择：它不改变文档流位置，只为子元素创建新的定位上下文 - 别用
position: static试图“取消定位”——它不能作为定位上下文，也不接受top/left等偏移 - 如果父元素本身是
absolute，那它的定位又取决于它自己的定位上下文，形成链式依赖
z-index 的覆盖逻辑：只对同级定位元素生效，且受 stacking context 切割
z-index 不是全局层叠编号，它只在同一个 stacking context 内比较。一旦父元素触发了新的 stacking context（比如设置了 opacity: 0.99、transform: translateZ(0)、filter: blur(1px)，或本身就是 position: fixed），它的所有子元素就被“关进小黑屋”，再高的 z-index 也盖不过屋外同级的另一个 stacking context 中的元素。
- 常见陷阱：给弹窗加了
z-index: 9999，但它的父容器有opacity: 0.99，结果弹窗被隔壁没透明度的导航栏压住 - 检查 stacking context：用 浏览器 开发者 工具 的 Layers 面板（Chrome）或 Elements → Computed →“Stacking Context”查看是否意外触发
- 避免无意义的触发：慎用
transform: translateZ(0)强制 硬件加速，它会静默创建 stacking context
relative / absolute / fixed 混用时的坐标系混淆
不同 position 值的元素，参考的坐标系完全不同：
立即学习 “ 前端免费学习笔记（深入）”；
-
position: relative：偏移基于自身原始位置，不影响其他元素布局 -
position: absolute：偏移基于最近的已定位祖先；若无，则基于初始包含块（视口） -
position: fixed：始终相对于视口，滚动也不变，且 ** 无视任何父级定位设置 **（即使父元素是absolute或relative）
这意味着：把一个 fixed 元素塞进 relative 容器里，不会让它“固定在容器内”，它照样钉在屏幕某处。想实现“容器内固定效果”，得用 position: sticky，且注意其 top 值是相对于滚动容器的边界起算。
调试定位问题的三步检查法
遇到定位错乱、遮挡异常、偏移失效，按顺序查这三项：
- 查父链：从目标元素往上逐级看
position值，确认最近已定位祖先是否符合预期；用 DevTools 的 Styles 面板快速 hover 元素看 computedposition - 查 stacking context：确认目标元素及其关键兄弟 / 父级是否意外创建了 stacking context（看 computed
opacity、transform、filter、will-change等） - 查 offset 应用：确认
top/left等是否被其他规则覆盖（比如被margin或 flex/grid 的对齐属性干扰），或者单位写成了20（缺单位）导致失效
.card {position: relative; /* 必须有，否则 .badge 的 absolute 会飞走 */} .badge {position: absolute; top: -8px; right: -8px;}嵌套定位真正难的不是语法，而是每一层 position 和每一个视觉属性都在悄悄改写坐标系和层叠空间。稍不注意，就变成“我明明写了 top，它却停在左上角”。
