父元素必须显式设position: relative，否则absolute子元素会向上查找定位上下文直至body或视口；其top/left基于padding box计算；父元素高度塌陷时需用min-height、padding-bottom或flex/grid布局解决；transform/filter会隐式创建containing block干扰定位。
父元素必须显式设 position: relative
不设就找不到锚点——position: absolute 子元素会一路往上找，直到 或视口。哪怕父元素有 width、padding 或 margin，只要没写 position: relative，它就还是 static，不算“已定位祖先”。
常见翻车现场：
-
.card { width: 300px; } .badge { position: absolute; top: 0; right: 0; }→ badge 飞到浏览器右上角 - 父元素写了
position: relative，但被 CSS-in-JS 动态覆盖或被更高优先级规则重置（比如重置样式表里写了* { position: static !important; }）
top/left 是从父元素的 padding box 边缘算起
不是内容区，也不是 border 外沿。父元素若有 padding: 16px，那么 top: 0; left: 0 的子元素会离上边和左边各空出 16px，视觉上“悬在”内边距里。
想让它贴着 border 内侧？别用负值硬调，容易失控。更稳妥的做法：
立即学习“前端免费学习笔记（深入）”；
- 把
padding挪到子元素上（比如给 badge 加padding: 16px，父元素清空 padding） - 父元素用
box-sizing: border-box，再配合调整尺寸 - 改用
transform: translate()做微调（注意：它不改变定位参考系，只做视觉偏移）
父元素高度塌陷时，absolute 子元素“看不见”
设了 position: relative 的父元素本身还在文档流里，但一旦子元素变成 absolute，它就彻底脱离文档流——父元素不再把它当高度来源。结果就是背景色、边框只包住文字，盖不住 badge 或弹窗。
临时解法（适合固定尺寸）：
- 给父元素加
min-height（比如min-height: 44px） - 用
padding-bottom占位（如子元素高 24px，父加padding-bottom: 24px）
长期更推荐：display: flex 或 display: grid 替代，比如 .parent { display: flex; justify-content: flex-end; align-items: flex-start; }，直接避免定位上下文依赖。
别让 transform 或 filter 悄悄抢走定位上下文
现代浏览器中，transform: translateY(10px)、filter: blur(1px) 这类属性会隐式创建新的 containing block。哪怕父元素写了 position: relative，如果同时用了这些属性，absolute 子元素可能意外参照它定位——而不是你写的那个 relative 父级。
排查建议：
- 打开 DevTools，选中父元素，在 Styles 面板里看 computed 的
contain和transform是否生效 - 临时注释掉
transform或filter，观察子元素是否回归预期位置 - 真需要动效又得保定位锚点？把
transform移到子元素上，父元素保持干净的position: relative
最常被忽略的是：父元素没塌陷、子元素也“看起来”在正确位置，但滚动容器里一动，它就错位——十有八九是隐式 containing block 在作祟。
