Flex 不提供定位上下文，子元素设 position: absolute 会脱离 flex 流程导致对齐失效；正确做法是父容器显式设 position: relative，再用 absolute 微调，同时避免 transform、overflow: hidden 等截断定位链。
Flex 本身不提供定位上下文，子元素加 position: absolute 后会脱离 flex 流程，直接导致居中、对齐失效——这不是 bug，是规范行为。真正能落地的方案，是让 flex 控制主结构，用 position: relative + absolute 做局部微调。
为什么导航栏右上角 badge 总是偏移？
常见现象：给头像加红点徽标（.badge），但点出现在页面左上角或完全错位。
-
.avatar容器没设position: relative，导致.badge的position: absolute向上回溯到<body>或最近已定位祖先 - 错误地把
.badge放在 flex 容器（如.navbar）里，而非嵌套在.avatar内部 - 用了
margin-left: auto推头像到右侧，又同时给.badge加right: -6px，但父级没position: relative，right失效
正确做法：.avatar { position: relative; }，再把 .badge 作为其子元素写死 top: -4px; right: -4px;。
sticky 导航栏里 flex 布局突然失效？
现象：加了 position: sticky; top: 0; 的导航栏，内部菜单项垂直不居中、左右间距错乱。
立即学习“前端免费学习笔记（深入）”；
- 父容器（如
.header）设置了overflow: hidden或transform，直接禁用sticky行为 - flex 容器本身是
sticky元素，但子项用了position: absolute，导致align-items: center对它无效 - 移动端触发
sticky后，滚动时重绘异常，justify-content计算偏差
关键检查点：.header { position: sticky; top: 0; display: flex; align-items: center; }，且确保其直接父容器无 overflow: hidden、无 transform、无 will-change 干扰。
下拉菜单展开后位置错乱或堆叠在左上角
这是最常被忽略的定位链断裂问题：子菜单（.submenu）用 position: absolute，但它的父项（.menu-item）没创建定位上下文。
- 漏写
.menu-item { position: relative; }—— Flex 不自动提供定位上下文 - 误以为
display: flex的父容器天然支持absolute子元素定位 - 用浏览器 DevTools 检查
.submenu的offsetParent，若显示为body，说明定位链断了 - 动画用
height或flex-basis过渡，实际无效；必须用max-height+overflow: hidden
验证方式：临时加 .menu-item { outline: 1px solid red; }，看是否包裹住文字和下拉箭头；再检查 .submenu 是否紧贴其下方。
复杂点不在 flex 写法多难，而在于定位上下文是否显式建立、是否被意外截断。每次加 absolute，先问一句：它的父级有没有 position: relative？有没有被更高层的 transform 或 overflow 拦截？
