元素定位“乱跑”源于对position定位基准和transform坐标系理解偏差：position:absolute找最近已定位祖先，无则退至视口；transform默认原点为元素中心，需用transform-origin调整，且与position叠加生效而非替代。
元素“乱跑”通常不是CSS失效，而是对 position 的定位基准和 transform 的坐标系理解有偏差。关键不在“压住它”，而在“搞清它以谁为原点、怎么算偏移”。
position 的定位起点，由最近的「已定位祖先」决定
很多人以为 position: absolute 是相对浏览器窗口定位，其实它是找最近的 position 值为 relative/absolute/fixed/sticky 的祖先元素。如果找不到，才退到初始包含块（通常是视口）。
- 没设
position: relative的父容器？子元素的absolute就会“飞”到 body 或 viewport 上 - 想让某元素严格相对于父盒左上角定位？先给父元素加
position: relative（不改变布局，只提供定位上下文） -
fixed永远相对视口，但注意：它会脱离文档流，可能影响后续元素排版
transform 平移不触发重排，但原点默认是元素中心
transform: translate(x, y) 看似简单，但它移动的是整个元素的渲染盒子，且默认变换原点（transform-origin）是 50% 50%（即元素中心）。这常导致“明明写了 top: 0 left: 0，再 translate(10px, 10px) 却没从左上角开始动”。
- 需要从左上角平移？加一句
transform-origin: 0 0 - 配合
position: absolute使用时，top/left定位的是未 transform 前的盒位置；translate是在此基础上二次移动——两者叠加，不是替代关系 - 动画中优先用
translate而非top/left，因为不触发 layout，性能更好
混用 position 和 transform 时，顺序影响结果
CSS 渲染顺序是：先计算常规定位（top/right/bottom/left），再应用 transform。也就是说，transform 总是在 position 定位完成后的坐标系里生效。
立即学习“前端免费学习笔记（深入）”；
- 写
top: 20px; transform: translateY(-10px)→ 先下移 20px，再上移 10px，最终在 10px 处 - 想实现“居中且微调”？推荐：用
position: absolute; top: 50%; left: 50%+transform: translate(-50%, -50%)居中，再额外加translate(2px, -3px)微调 - 避免同时用
top和translateY控制同一方向——逻辑易混淆，调试困难
基本上就这些。不复杂，但容易忽略祖先定位上下文和 transform 的默认原点。动手前，先问自己两个问题：这个元素的定位根是谁？它的 transform 是绕哪一点转、从哪一点移？
