绝对定位元素以最近的已定位祖先为包含块，父容器需显式设position: relative才能成为包含块；定位原点恒为内容区左上角，padding不影响起点，需手动补偿或结构分离来对齐。
父容器没设 position: relative，子元素就找不到定位锚点
绝对定位元素不会自动以父容器为参考——它只认“已定位祖先”，而默认 position: static 的父容器不算。结果就是子元素回退到 body 或视口定位，视觉上“飘走”或错位。
必须给直接父容器显式加 position: relative。这个声明本身不改变布局，但会把它变成包含块（containing block），让 top/left 等值真正相对于它计算。
- 别只靠开发者工具看“结构层级”，要逐层检查
position值，尤其注意祖父级是否意外设置了relative或absolute，造成干扰 - 如果父容器是 flex 或 grid 容器，
position: relative依然有效，无需额外处理 -
position: sticky也能作为包含块，但行为更复杂，日常优先用relative
top: 0; left: 0 贴不到父容器内边，是因为定位起点是内容区左上角
这是最常被误解的一点：父容器设了 padding: 20px，子元素写 top: 0; left: 0，结果离内边还有 20px —— 不是 bug，是规范定义。定位原点永远是内容区（content box）左上角，不是 padding 内侧，也不是 border 外沿。
想视觉上对齐 padding 内侧，只有两种靠谱方式：
立即学习“前端免费学习笔记（深入）”；
- 手动补偿：父容器
padding-left: 16px→ 子元素写left: 16px；padding-bottom: 24px→bottom: 24px - 结构分离：外层容器设
position: relative并负责定位逻辑，内层再套一层 div 负责padding和背景等视觉样式。这样改 padding 不会影响子元素位置 - 别指望
box-sizing改变定位起点——它只影响宽高计算，对top/left原点毫无作用
用 inset 或 transform 微调时要注意边界条件
inset: 0 看似省事，但它等价于 top: 0; right: 0; bottom: 0; left: 0，起点仍是内容区。有 padding 时，它会让子元素“缩进”一段距离，而不是贴边。
transform 更适合微调，比如 transform: translateX(-10px) 补偿像素级误差，但它不参与布局计算，仅视觉偏移。
- 同时设
top和bottom会挤压高度，此时height会被忽略，除非用!important强制覆盖 - 响应式场景下，padding 动态变化（如媒体查询中调整），手动补偿容易失效，结构分离更稳定
-
transform: translate(-50%, -50%)配合top: 50%; left: 50%是居中唯一可靠方式，margin: auto在绝对定位下无效
父容器宽高为 0 或 overflow: hidden 会掩盖真实问题
有时候子元素“不见”了，不是定位错了，而是父容器没设明确宽高，或者被 overflow: hidden 裁剪掉了。用开发者工具的“Layout”面板检查父容器实际尺寸和溢出状态。
- 浮动（
float）父容器若未清除，高度可能塌陷为 0，导致绝对定位子元素无处可依 - Flex/Grid 容器中，若子项未设
flex-shrink: 0或尺寸约束，也可能导致父容器收缩 -
z-index过低不会导致偏移错误，但会让元素被遮挡，误判为“没生效”
