Flexbox 与 position 互补：Flex 负责整体布局，position 解决局部精确定位；父容器需设 position: relative 才能为 absolute 子元素提供定位上下文，否则元素飞出可视区。
position 和 display: flex 不是互斥方案，而是互补手段：Flexbox 负责整体结构与流式对齐，position 解决局部精确定位问题。直接套用 position: absolute 到 flex item 上而不设定位上下文，大概率导致元素飞出可视区或重叠错乱。
为什么必须给父容器加 position: relative
Flex 容器本身不构成定位上下文——position: absolute 的子元素会向上查找第一个已定位（position 值为 relative、absolute、fixed 或 sticky）的祖先，找不到就回退到 body 或视口。常见错误是只给 badge 或图标加 position: absolute，却忘了给 .header 加 position: relative，结果图标贴在浏览器左上角。
正确做法：
- 给页眉容器（如
#header或.nav）设置position: relative - 再在内部子元素（如通知徽标、下拉箭头、搜索框右对齐按钮）上使用
position: absolute - 避免对整个导航菜单项（
.nav-item）滥用absolute，否则破坏 Flex 的自动分布逻辑
justify-content: space-between 与 absolute 混用时的冲突点
当一个 flex item 同时满足：justify-content: space-between + position: absolute，它会脱离文档流，不再参与主轴空间分配——这意味着它既不会被“挤”到右侧，也不会影响其他 item 的间距。
典型场景：页眉左侧放 logo，中间放导航，右侧放用户头像；但你想在头像右上角加一个红点徽标（.badge）。这时不能把 .badge 放在头像外层再用 justify-content: flex-end 推过去，而应：
立即学习“前端免费学习笔记（深入）”；
- 让头像容器（
.avatar）本身是 flex item，靠右对齐 - 给
.avatar加position: relative - 把
.badge设为position: absolute; top: -4px; right: -4px; - 不给
.badge设置flex相关属性（flex-grow、order等无效）
Sticky 导航栏里嵌套 flex 布局的注意事项
position: sticky 必须配合 top（或 bottom）才生效，且其父容器不能有 overflow: hidden 或 transform，否则 sticky 失效。当页眉同时是 sticky 和 flex 容器时：
- 确保
.header同时有display: flex和position: sticky -
align-items: center仍有效，可垂直居中所有 flex item - 若内部某 item（如搜索框）需要固定宽度+自适应剩余空间，用
flex: 1比width: 100%更可靠 - 不要在 sticky 元素上设
height: 100vh，会导致滚动异常
相对定位（position: relative）微调的适用边界
position: relative 不脱离文档流，适合小范围偏移（±2–8px），比如让标题文字下沉 2px 对齐图标基线、让按钮图标比文字高 1px。但一旦偏移量超过 10px，或需响应式动态调整，就该考虑：
- 用
margin-top/margin-bottom替代top - 用
transform: translateY()避免触发重排（性能更好） - 确认父容器没有
overflow: hidden，否则相对定位超出部分会被裁剪
