会，绝对定位元素脱离文档流，不受Flex对齐控制，偏移量相对于最近position: relative祖先计算；Flex容器需显式设position: relative才能成为参考父级。
Flex容器里用position: absolute会失效吗？
会，但不是“失效”，而是行为变了：绝对定位元素脱离文档流，不再受display: flex的主轴/交叉轴对齐控制（比如justify-content或align-items），它的top/left等偏移量是相对于最近的position: relative祖先计算的——如果Flex容器没设position: relative，就往上找，可能跑到body去了。
常见错误现象：div设了position: absolute，本想右上角贴着Flex容器边缘，结果飘到整个视口右上角。
- Flex容器必须显式加
position: relative，才能成为绝对定位的“参考父级” -
align-self、margin: auto等Flex内建居中方式对绝对定位子元素完全无效 - 若需在Flex布局中做局部覆盖（如弹窗、tooltip），推荐把绝对定位元素放在Flex容器内部，且紧邻其兄弟元素，避免层级错乱
Flex子项里再嵌套position: fixed会怎样？
position: fixed直接脱离所有父容器（包括Flex容器），定位基准永远是视口。它和Flex无关，但容易引发z-index和滚动表现问题。
使用场景：顶部常驻操作栏、返回顶部按钮——它们不该随Flex容器内滚动而消失。
立即学习“前端免费学习笔记（深入）”；
-
fixed元素不占Flex布局空间，不会影响其他子项的排列，这点和absolute一致 - 若Flex容器有
overflow: hidden或transform（如scale(1)），可能意外截断fixed元素，这是浏览器渲染层限制，不是Flex的问题 - 移动端要注意：iOS Safari下
fixed在input聚焦时可能错位，此时建议改用absolute+ 监听scroll动态更新top
用transform移动Flex子项，会影响Flex计算吗？
不影响。transform只是视觉位移，不改变文档流位置，Flex布局引擎仍按原始尺寸和顺序计算主轴分布、换行、伸缩比。
性能影响明显：用transform: translateX()做动画比改left更高效，尤其在需要频繁重排的Flex列表中。
- 适合做hover位移、滑动提示、微交互动画，但别依赖它来“修正”布局错位——那说明Flex参数本身有问题
-
transform后的元素，getBoundingClientRect()返回的是变换后的位置，但offsetLeft/offsetTop仍是原始值，JS逻辑里容易踩坑 - 不要对
flex: 0 0 auto的子项滥用transform模拟拉伸，视觉上像，但实际宽度没变，可能撑破容器或导致文字折行异常
IE11下Flex + position混用最常崩在哪？
IE11的Flex实现有严重bug：当Flex容器设了position: relative，且子项用position: absolute时，该子项的top/bottom可能被忽略，只认left/right；更糟的是，如果Flex容器用了flex-wrap: wrap，绝对定位子项甚至会出现在错误的行区域。
兼容性影响：这不是写法错误，是引擎缺陷，无法靠CSS hack完全修复。
- 绕过方案：把绝对定位元素移出Flex容器，用
margin-top或top配合position: relative父级手动对齐 - 避免在IE11中对Flex子项同时使用
flex-grow和position: absolute——IE会直接忽略flex-grow - 检测手段：用
document.documentMode === 11判断，必要时降级为float或inline-block布局
混用本身没问题，真正复杂的是“谁负责定位、谁负责尺寸、谁触发重排”的责任边界——稍一模糊，Chrome里好好的代码，到Safari或旧版Edge里就错位几像素，还查不出原因。
