绝对定位元素参照最近已定位祖先，若无则回退到；偏移原点为参照元素padding box左上角；transform/filter等会创建新包含块，改变定位基准。
父元素没设 position: relative，定位参照错了
绝对定位元素默认找最近的已定位祖先（position 值为 relative、absolute、fixed 或 sticky），找不到就回退到 。而 可能有默认 margin 或被重置样式干扰，导致视觉偏移。
常见现象：明明写了 top: 10px; left: 20px;，元素却贴在浏览器左上角或意外偏移几十像素。
- 用开发者工具检查目标元素的
offsetParent，看它实际参考的是哪个节点 - 临时给预期父容器加
position: relative; outline: 1px solid red;，观察红色框是否包裹住你想要的定位范围 - 别依赖祖父级或更远的祖先——哪怕它恰好有
position: relative，也可能不是你设计的参照点
top/left 是从 padding box 起算，不是 border 或 content
绝对定位的偏移原点是参照元素的 padding box 左上角，不是 border 边缘，也不是内容区起点。如果父元素有 padding: 20px，那么 top: 0; left: 0 的子元素会紧贴内边距起始处，看起来像“缩进”了。
- 想让子元素对齐父元素 border 左上角？要么清空父元素
padding，要么手动补偿：top: -20px; left: -20px; - 统一理解盒模型：给父元素加
box-sizing: border-box;不影响定位逻辑，但能减少认知偏差 - 避免同时设
left和right（或top和bottom）来控制宽度/高度——它们会挤压尺寸，行为不可预测
transform 或 filter 暗中创建了新定位上下文
只要父元素用了 transform（哪怕只是 transform: translateZ(0)）、filter、will-change 或 opacity ，就会强制创建新的 containing block，此时子元素的 <code>top/left 就不再以父元素的 padding box 为原点，而是以这个新块的 border box 为准。
- DevTools 中选中父元素，在 Styles 面板里搜
transform、filter、will-change，一个都不能漏 - 临时注释掉这些声明，看定位是否恢复正常
- 若必须保留 transform，且需维持原有定位关系，可把
position: relative移到它的上一级父容器
用 transform: translate() 做微调比硬改 top/left 更稳
top/left 是基于参照容器计算的，而 transform: translate() 是基于元素自身宽高，两者职责分离后更可控。尤其在响应式、字体缩放或动态尺寸场景下，硬调像素值容易失效。
- 居中弹窗：写
top: 50%; left: 50%; transform: translate(-50%, -50%);，不用算宽高一半 - 右上角徽标：用
top: 0; right: 0; transform: translate(50%, -50%);让图标右上角顶到父容器右上角 - 微调时优先动
transform，比如transform: translate(2px, -1px);，主定位逻辑（top/left）保持不变 - 注意：
transform会创建新的层叠上下文，若发现z-index失效，先查是不是这里触发的 stacking context
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
