定位属性必须成组写在同一选择器下，禁用分散声明；命名需语义化如js-tooltip-anchor；z-index须配合层叠上下文统一标尺管理；动画优先用transform替代top/left。
定位属性写在哪儿最容易失控
定位混乱的根源往往不是 position 用错了，而是它和 top/left 等偏移量散落在不同地方、被不同人反复覆盖。一个组件里 position: relative 在父元素，top: -2px 却在子元素的伪类里，调试时根本看不出层级关系。
- 所有定位相关声明（
position、top、z-index、transform）必须成组出现，写在同一选择器下 - 避免在通用工具类（如
.mt-4）里塞position: absolute—— 工具类只管间距/颜色，不管布局逻辑 - 当需要动态调整位置（比如 tooltip 跟随鼠标），优先用
transform: translate()替代top/left，减少重排，也避免触发新层叠上下文
class 命名怎么防“absolute-17”这种鬼名字
命名不是为了好看，是为了让下一个人（或三天后的你）一眼判断出这个定位是干啥的、能不能删、改了会不会影响别处。看到 header-absolute-fix 这种名字，没人知道它 fix 的是滚动穿透还是 z-index 层级。
- 用语义前缀表明用途：
js-tooltip-anchor（JS 需要锚点）、visually-hidden-offset（仅视觉隐藏偏移）、sticky-header（有 sticky 行为） - 禁用纯位置描述：
top-left-corner、right-50—— 位置可能变，名字就立刻失效 - 如果组件本身已封装定位逻辑（比如 Modal），对外只暴露
is-open这类状态类，内部定位细节不透出到 class 名中
z-index 不是越大越好，但为什么总有人写 9999
z-index 失效不是因为值太小，而是因为没理解层叠上下文。你在 div 里写 z-index: 9999，但它父容器是 position: relative 且 z-index: 1，那它永远被锁死在那个局部上下文里。
- 项目初期就定义好 z-index 标尺，比如：
z-modal: 1000、z-dropdown: 900、z-sticky: 800，全部用 CSS 自定义属性管理 - 禁止在非根级定位元素上写具体数值（如
z-index: 5），除非你确认它父级没有创建新层叠上下文 - 调试时用浏览器开发者工具的「Rendering」面板勾选「Layer borders」，一眼看出哪些元素意外创建了新层叠上下文
用 CSS 定位做动画时，transform 和 top/left 到底选哪个
用 top/left 做位移动画会强制浏览器重排+重绘，而 transform: translate() 只触发合成，性能差一个数量级。但很多人卡在“为啥加了 transform 后定位偏了”上。
立即学习“前端免费学习笔记（深入）”；
- 如果元素原本靠
top/left定位，改成动画时先把它设为position: absolute+top: 0; left: 0，再用transform: translate(x, y)控制位移 - 不要混用：
transform: translate(10px, 0); top: 5px—— 浏览器会叠加计算，结果难预测 - 动画中需响应式偏移（比如根据视口宽度调整）？用
calc()配合transform，例如：transform: translate(calc(100vw - 200px), 0)
定位真正难的不是语法，是每次修改都要同步判断：它属于哪个层叠上下文、有没有被 transform 中断文档流、命名是否还能反映它的职责——这些没法靠 lint 工具检查，只能靠写的时候多停半秒。
