position: absolute元素定位到页面左上角，是因为其基准是最近已定位祖先元素，若无则回溯至；需给父容器设position: relative以建立新定位上下文，此时top/left从父级padding box左上角计算。
为什么position: absolute会跑到页面左上角？
因为absolute的定位基准是「最近的已定位祖先元素」；如果父级没设position（relative/absolute/fixed/sticky），浏览器就一路往上找，直到——所以它默认贴着视口左上角。
- 必须给父容器显式加
position: relative（哪怕不设top/left） -
relative本身不改变文档流位置，只建立新的定位上下文，这是关键 - 别用
position: static（默认值）或没写position的父级，它们不算“已定位”
父级position: relative后，子元素top/left怎么算？
数值从父级**padding box**的左上角开始计算，不是border box，也不是content box。也就是说：内边距会影响可定位区域的起点。
-
top: 0; left: 0→ 贴父级内边距左上角，不是紧贴border - 若父级有
padding: 20px，top: 0; left: 0实际离父级border还有20px - 想贴border？要么去掉padding，要么用
top: -20px手动抵消（不推荐，耦合强）
常见踩坑：溢出、z-index失效、响应式错位
绝对定位脱离文档流，容易引发隐藏问题，尤其在动态内容或媒体查询下。
- 父级高度塌陷：如果父级只有
absolute子元素，它可能高为0，导致后续元素上移——需用min-height或伪元素清除 -
z-index只在同一定位上下文中生效；父级没设z-index，子元素设再大也压不住兄弟元素的父容器 - 响应式时别只改
top/left像素值；用transform: translate()或百分比+calc()更可靠
替代方案：什么时候不该用absolute+relative？
当目标只是“居中”“右对齐”“底部停靠”，现代布局有更稳的方式。
立即学习“前端免费学习笔记（深入）”；
- 居中一个块：用
display: flex+justify-content/align-items，不用定位上下文 - 右上角图标：
position: sticky配合right: 0更适应滚动，且不脱离流 - 需要动画或频繁重排：
transform: translate()比修改top/left性能更好，触发GPU加速
真正需要absolute+relative的，是那些必须脱离流、又严格依赖父级边界做坐标锚点的场景——比如下拉菜单、气泡提示、自定义滚动条thumb。其他时候，先想想能不能绕开。
