父元素必须显式设置position: relative，否则绝对定位元素将相对于<html>定位；其top/left等偏移基于父元素padding box计算，且父元素需有可预期尺寸，否则子元素会“飘走”。
父元素必须显式设置 position: relative
绝对定位元素（position: absolute）默认相对于最近的「已定位祖先元素」计算偏移，而不是直接父元素。如果所有祖先都没设 position（relative、absolute、fixed 或 sticky），它就会一路向上找到 <html>（即视口）作为参考。
所以关键一步是：在你希望作为“定位上下文”的父容器上，**必须加 position: relative**——哪怕它本身不需要偏移，这个声明只是为子元素创建一个新的定位根节点。
- 不能只写
display: block或width/height，这些不构成“已定位” -
position: static（默认值）无效，它被浏览器忽略为定位上下文 -
position: relative不改变文档流位置，适合纯粹用作“锚点”
top/left 等偏移量是相对于父元素 padding box 的
当父元素设置了 position: relative 后，子元素的 top: 10px 表示从父元素**内边距区域的上边缘**向下 10px，不是 border 或 margin 边缘。
这意味着：
立即学习“前端免费学习笔记（深入）”；
- 如果父元素有
padding: 20px，top: 0的子元素会出现在距父元素内容区顶部 0px 的位置，也就是距离父元素 border 顶边 20px 处 - 父元素的
margin对子元素的定位无影响——绝对定位元素已脱离文档流，不参与 margin 折叠 - 若需精确对齐 border 边缘，可在父元素上设
padding: 0，或用box-sizing: border-box统一理解
常见错误：父元素没设宽高，导致子元素定位“飘走”
当父元素是空的、或仅含 inline 内容、或未设定尺寸时，它的高度可能塌陷为 0。此时即使写了 position: relative，子元素的 top: 50% 或 bottom: 0 仍会按 0 高度计算，视觉上像消失或错位。
排查和解决方法：
- 用浏览器开发者工具检查父元素实际渲染高度（Elements → Computed → height）
- 给父元素加临时背景色：
background: #eee，看是否“看不见但存在” - 常用修复：
min-height: 1px、height: fit-content、或确保其有非空内容/浮动子元素/clearfix - Flex/Grid 容器中，
position: relative依然有效，但注意主轴方向对子项排列的影响可能掩盖定位效果
嵌套绝对定位时，层级和堆叠上下文要注意
多个 position: absolute 元素在同一父容器下，默认按 HTML 顺序层叠（后写的在上），但一旦某个祖先设置了 z-index（且 position != static），就可能创建新的堆叠上下文，打乱预期层级。
典型陷阱：
- 父元素设了
z-index: 1，子元素即使设z-index: 999，也只能在该父级的堆叠上下文中生效，无法盖过同级其他容器 -
opacity < 1、transform、filter等属性也会隐式创建堆叠上下文，干扰z-index行为 - 调试建议：在 DevTools 的 Layers 面板中查看堆叠上下文树，比单纯看
z-index数值更可靠
.container {
position: relative;
width: 300px;
height: 200px;
background: #f0f0f0;
}
.overlay {
position: absolute;
top: 20px;
right: 10px;
background: #007bff;
color: white;
padding: 8px 12px;
}
绝对定位真正起效的前提，从来不是“用了 absolute”，而是“有没有一个明确、稳定、尺寸可预期的 relative 父容器”。很多人卡在视觉错位，其实只是父元素高度为 0 或压根没触发定位上下文——先打开 DevTools 看 computed position 和 height，比调 top 值更快定位问题。
