父容器未设position: relative时，absolute子元素会向上查找最近已定位祖先，若无则锚定视口导致“飘走”；Flex容器本身不提供定位上下文，必须显式添加position: relative才能使子元素相对于它定位。
父容器没设 position: relative，子元素 position: absolute 就会飘走
Flex 容器本身不提供定位上下文，display: flex 不等于 position: relative。哪怕父元素是 flex 布局，只要它没显式设置 position 为 relative、absolute、fixed 或 sticky，子元素的 position: absolute 就会向上找——通常落到 <body> 或视口上，导致定位完全偏离预期。
常见错误写法：
.container {
display: flex;
}
.item {
position: absolute;
top: 0;
right: 0;
}
这样 .item 实际参照的是视口右上角，不是 .container 的右上角。
- 必须给父容器加
position: relative（哪怕其他样式不变） -
position: relative不影响 Flex 布局行为，只是“激活”定位上下文 - 不要依赖
body或html作为定位父级——滚动时偏移、重置样式可能破坏定位
top/left 值是相对于父容器内容区，不是 padding 区
当父容器设置了 padding，position: absolute 子元素的 top: 0 是从父容器的 content box 顶部开始算，不是 padding 边缘。如果想贴着 padding 内边缘，得手动补偿，比如 top: 10px 对应 padding-top: 10px。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 边偏移（
top、right等）始终以父容器的 border box 内边缘为原点 - 百分比值（如
width: 50%）也按父容器 content width 计算，不是可视区域 - 如果父容器有
border，且需要精确对齐 border 内侧，用box-sizing: border-box更稳妥
Flex 子项同时设 position: absolute 后，它就彻底脱离 Flex 流了
这是设计行为，不是 bug。一旦子元素设了 position: absolute，它不再参与 justify-content、align-items、order、flex-grow 等任何 Flex 属性计算。它的尺寸、位置、顺序全部由自身定位属性决定。
- 别指望
align-items: center能把绝对定位子项居中——它已经不在 Flex 流里了 - 如果需要居中，得手动用
top: 50%+left: 50%+transform: translate(-50%, -50%) - 多个绝对定位子项之间不会自动避让，可能重叠；需靠
z-index控制层叠
多个绝对定位子项共用一个父容器时，注意 z-index 作用域
z-index 只在同一个定位上下文中生效。只要父容器是同一个 position: relative 元素，所有子 position: absolute 元素就在同一 stacking context 里，z-index 才能直接比较。
- 如果父容器没设
position，各子项可能各自创建 stacking context，z-index互不干扰 - 避免在父容器上乱加
z-index（比如设成0），它会无意中创建新 stacking context，隔离子项 - 调试时打开浏览器开发者工具的“Layers”面板，能直观看到 stacking context 分层
position: relative 是整个链条里最易忽略也最致命的一环——它不报错、不警告，只默默让定位失效。其他参数再精细，这一步漏了，一切归零。 
