ie11中flex容器内position: absolute子元素定位异常，需给父容器加position: relative；避免transform与absolute混用；子项设flex: none并显式定义宽高；响应式断点须重写定位值。
IE11里position: absolute子元素在flex容器中不按预期定位
不是CSS写错了，是IE11对flex容器内绝对定位元素的“包含块”计算逻辑和标准完全不同：它默认把flex容器当作position: static处理，导致top/left相对整个页面而非父容器生效。
- 必须给flex父容器显式加
position: relative（哪怕只是position: relative; z-index: 0），IE11才承认它是包含块 - 漏掉这句，
position: absolute子项会飘到视口左上角或继承更外层定位上下文 - 如果父容器本身已是
position: fixed或absolute，IE11反而可能忽略其flex属性，建议统一用relative兜底
transform配合position: absolute在IE11中失效或偏移
IE11对transform的硬件加速支持不稳定，尤其当它和flex容器、绝对定位嵌套时，translateX/translateY常出现1–2px偏移或完全不触发。
- 避免在flex子项上同时用
position: absolute和transform——IE11会优先执行transform，再计算定位，顺序错乱 - 改用
top/left替代transform做位移（例如top: 10px; left: 20px） - 若必须用
transform，需加-ms-transform: translateX(10px) translateY(20px)，且确保父容器没设overflow: hidden（IE11下会裁剪transform区域）
flex容器内position: absolute子项尺寸塌陷或溢出
IE11不会自动将绝对定位子元素从flex流中“剔除干净”，有时仍参与flex-basis计算，导致宽度/高度异常，尤其在flex-wrap: wrap场景下。
- 给绝对定位子项加
flex: none（等效于-ms-flex: none），强制脱离flex分配逻辑 - 显式声明
width和height，不要依赖100%——IE11对width: 100%在绝对定位+flex混合场景下解析不可靠 - 如果子项含文字并需要省略，必须在外层再包一层
<div>，并在该内层设<code>white-space: nowrap; overflow: hidden; text-overflow: ellipsis，否则IE11直接忽略截断响应式断点中绝对定位位置错乱
IE11不会动态重算绝对定位元素在不同媒体查询下的
top/left值，尤其当flex父容器的flex-direction或flex-basis在断点中变更时。- 每个关键断点都必须重写绝对定位子项的
top/left/right/bottom，不能只靠继承 - 避免用
calc()计算定位值（如left: calc(50% - 20px)），IE11对calc内flex相关单位（如flex-basis百分比）支持极差 - 如果父容器在断点中从
row切到column，绝对定位子项的锚点方向要同步调整（例如原top: 10px在column下可能需改为left: 10px）
真正麻烦的不是定位本身，而是IE11把flex容器、绝对定位、transform三者混用时，会随机启用某一套旧渲染路径——有时候表现像IE10，有时候又像部分支持的IE11，必须在真实环境逐断点inspect computed styles，不能只看声明。
- 每个关键断点都必须重写绝对定位子项的
