给父容器加position: relative可固定绝对定位元素的参考系；伪元素抖动需设为absolute并删display/float；left/top偏移应配合transform精调；缩放时需用zoom因子校正坐标。
绝对定位元素“飘走”了，怎么让它乖乖待在父容器里？
它没飘走，只是找错了参考系。position: absolute 默认会往上找第一个 position 不是 static 的祖先——如果父容器没设 position: relative，它就直接跳到 body 或视口去了。
- 给直接父容器加
position: relative，不改变布局，但能稳住子元素的定位上下文 - 用开发者工具检查祖先链：右键元素 → “检查”，逐级看
Computed里的position值，揪出意外设了relative或absolute的“干扰项” - 临时加
outline: 1px dashed red到疑似干扰祖先上，看定位框是否套错地方 - 别依赖
body当锚点——body默认不是已定位元素，且可能被框架或重置样式悄悄改过
悬停动画一动，旁边元素就抖，怎么消掉这抖动？
抖动 = 布局偏移（Layout Shift），根源是伪元素（比如 ::after）在文档流里“伸胳膊蹬腿”。它变宽、变 float、甚至 display 切换，都会触发重排。
- 把动态伪元素设为
position: absolute，再给它的父元素（比如li）加position: relative - 删掉伪元素上的
display: block和float—— 这俩是布局杀手，绝对定位后它们完全多余 - 确保伪元素的
content非空（哪怕只是content: ""），否则position: absolute可能不生效 - 如果伪元素需要撑开父容器高度（比如下划线要留空隙），改用
padding-bottom或margin-bottom控制，而不是靠它自己占流
left/top 定位总差几像素，是数值写错了吗？
不是数值错，是定位基准和视觉意图错位。left: 20px 是从元素**外边框左上角**量起，但你要对齐的可能是图标中心、按钮右边缘，或者父容器 padding 内侧。
- 用
left/top做粗定位（比如“贴右上角”），再用transform: translate()精调（比如“往右多挪 4px 让图标不压边”） - 居中一律用
left: 50%; top: 50%; transform: translate(-50%, -50%)，别信margin: auto在 absolute 上的效果 - 避免混合使用
top和bottom同时设固定值——除非你真想靠四边挤压来控制尺寸，否则宽度/高度会被忽略 - 检查
box-sizing：全局加* { box-sizing: border-box; }，否则width: 100px+border: 2px实际占 104px，偏移自然不准
缩放（zoom）后鼠标定位全乱了，怎么修？
zoom 是渲染层缩放，JS 获取的 clientX/clientY 和 getBoundingClientRect() 还是原始逻辑像素——你用没缩放的数去设 top/left，等于拿尺子量放大后的地图。
立即学习“前端免费学习笔记（深入）”；
- 拿到原始偏移后，除以当前缩放因子：
const scale = parseFloat(getComputedStyle(document.body).zoom) || 1;，然后btn.style.top = (e.clientY - rect.top) / scale + "px" - 别用
zoom做响应式适配——它是非标准属性，且会破坏坐标一致性；优先用transform: scale()+transform-origin替代 - Electron 应用里尤其注意：主进程设置 zoom 后，渲染进程的 JS 坐标不会自动适配，必须手动校正
- 如果用了
transform: scale()，记得getBoundingClientRect()返回的是缩放后的真实尺寸，但clientX/Y仍是屏幕坐标，需统一换算
实际项目里最常被忽略的，是 transform 和 filter 这类属性会悄悄创建新的包含块，让 absolute 元素的参考系突然上移一层——调试时看到定位框“跳级”，八成就是这儿卡住了。
