absolute 子元素未按父容器定位，因定位基准是最近已定位祖先而非直接父元素；父容器需设 position:relative 等（非 static）才生效，且需检查 overflow、box-sizing 和 transform 对定位上下文的影响。
子元素用 position: absolute 但没按父容器定位？
因为 absolute 的定位基准是「最近的已定位祖先」，不是直接父元素。如果父容器没设 position（static 是默认值，不算“已定位”），浏览器就会一路往上找，直到 body 或 html —— 这就是为什么子元素飞到页面左上角去了。
实操建议：
- 给父容器加
position: relative（最常用，不影响布局流） - 也可以用
position: absolute、fixed、sticky，但要小心它们对父容器自身位置的影响 - 别只写
top/left，记得检查父容器是否有overflow: hidden或边框 / 内边距，可能遮住子元素
relative 父容器里 absolute 子元素偏移不准？
偏移量（top、right 等）是从父容器的 content box 边缘 算起，不是 padding box 或 border box。如果父容器有 padding，子元素不会自动避开它 —— 它会从 content 区左上角开始算，可能被 padding 盖住或挤出可视区。
常见错误现象：
立即学习 “ 前端免费学习笔记（深入）”；
- 子元素紧贴父容器左上角，但看起来“卡在 padding 里面”
- 设了
top: 0; left: 0，结果没顶满，留白像有 margin
解决方法：
- 确认父容器的
box-sizing：默认是content-box，改border-box不影响absolute定位逻辑，但能统一尺寸预期 - 若需子元素撑满父容器内容区，用
inset: 0（现代写法）或top: 0; right: 0; bottom: 0; left: 0 - 避免依赖父容器
padding来“预留空间”，该留空就用子元素的margin或transform
父容器设了 relative，子元素却仍溢出且被裁切？
这不是定位失效，而是 overflow 在起作用。父容器设 position: relative 后，如果同时有 overflow: hidden（或 auto、scroll），超出部分会被裁剪 —— 即使子元素是 absolute。
使用场景：
- 做下拉菜单、Tooltip 时，父容器常带
overflow: hidden防止内容撑破布局 - 轮播图容器设
relative+hidden，但指示器用absolute放在右上角，结果被裁掉
关键判断点：
- 打开浏览器开发者工具，检查父容器 computed 样式里的
overflow值 - 临时删掉
overflow看是否恢复显示，确认问题根源 - 真需要裁切又得显示子元素？把子元素提到更高层级的容器里（比如挂到
body下），用 JS 动态计算位置
移动端或 flex/grid 父容器里设 relative 有问题？
绝大多数情况没问题，但有两个隐性兼容点容易被忽略：
- 老版 Safari（iOS 12 及更早）对
position: relative在display: flex容器上的表现不一致，可能导致子元素定位偏移；稳妥做法是加一层 wrapper div - 如果父容器是
grid且设置了place-items或justify-content，relative不会影响这些属性，但absolute子元素会脱离 grid flow，不再参与对齐计算 - 不要在
transform有值的父容器上依赖relative定位 —— 某些 Android WebView 会把 transform 容器当作新的 containing block，行为不统一
真正麻烦的从来不是加不加 relative，而是加完之后没检查父容器的 overflow、transform 和 box-sizing 这三个属性是否悄悄改变了定位上下文。
