position: sticky失效主因是祖先元素overflow:hidden/auto/scroll截断滚动上下文，使其退化为static；需逐级检查至body的computed overflow值，优先用clip-path:inset(0)替代overflow:hidden修复。
为什么手写 position + top/right 容易出错
不是参数写错，而是语义断裂：单独声明 top: 10px 却没配 position: absolute，浏览器直接忽略；漏写 position: relative 在父容器上，absolute 就会相对于 body 偏移。更隐蔽的问题是，不同定位模式（sticky、absolute、fixed）对父容器约束完全不同，混用时失效无声无息。
-
position: sticky要求父容器不能有overflow: hidden或auto，否则完全不触发 -
position: absolute依赖最近的position: relative/absolute/fixed祖先，DOM 结构一变就偏移 -
position: fixed脱离所有滚动上下文，用在局部模块里（比如弹窗内的按钮）会导致它“钉死”在视口而非模块内
@mixin 封装定位逻辑比 CSS 自定义属性更可靠
CSS 自定义属性（--pos-top）无法控制 position 基础值，只能管偏移量；而 @mixin 能把 position 和配套属性打包输出，编译即固化，不会被运行时 JS 意外覆盖。
- 必须显式声明基础
position值：@mixin pos-sticky($top: 0) { position: sticky; top: $top; }，不能只封装top - 避免万能参数：
@mixin pos($t, $r, $b, $l)掩盖了语义——你根本不知道调用的是sticky还是absolute - 不封装
position: static：它是默认值，显式声明反而干扰 reset 规则
居中类 @mixin 必须用 transform: translate()
用 top: -50% + left: -50% 居中，本质是让元素上移自身高度的 50%，但这个计算发生在布局阶段（触发 reflow），性能差；而 transform: translate(-50%, -50%) 是渲染层偏移（只触发 repaint），且基准始终是元素自身，不受父容器 transform 影响。
-
@mixin pos-absolute-center应固定包含：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 别省略
position: absolute—— mixin 不会自动给父容器加relative，这点得人工保障 - 在 flex 容器里慎用：flex 本身有
justify-content/align-items，硬套绝对定位会破坏流式行为
滚动吸附场景优先选 position: sticky
导航栏、表格表头、侧边栏锚点这类“滚动到临界点才吸附”的需求，sticky 是唯一既保持文档流又无需 JS 的方案。但它不像 fixed 那样“永远钉住”，也不像 absolute 那样“精确偏移”，用错场景反而更难调试。
- 确认父容器没有
overflow: hidden或overflow: auto，否则sticky直接静默失效 -
sticky只在滚动经过设定阈值（如top: 0）时生效，不满足条件时退化为static，视觉上就是“突然消失” - 不要用
sticky实现气泡提示或下拉菜单——它们需要脱离文档流并精确定位，该用absolute
sticky 的生效边界依赖于滚动容器的尺寸和内容高度，而不是单纯靠 CSS 属性就能推断出来；调试时得打开 DevTools 滚动预览，不能只看样式面板。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
