优先选 position: sticky；它支持滚动吸附且不脱离文档流，适用于导航栏等场景；absolute 仅用于精确偏移（如气泡），fixed 仅用于视口级固定（如全局 toast）。
position属性值选哪个才不踩坑
绝对定位（position: absolute）和固定定位（position: fixed）最常被误用——不是所有“想让它停在某处”的场景都该用它们。比如在滚动容器里做悬浮按钮，用 fixed 会脱离容器流，导致位置错乱；而用 absolute 又依赖最近的 position: relative/absolute/fixed 祖先，一不留神就找不到参照物。
真正该优先考虑的是 position: sticky：它天然支持滚动吸附，且不脱离文档流，兼容性也早不是问题（Chrome 56+/Firefox 59+/Safari 15.4+）。但注意它只在滚动到临界点时才生效，且父容器不能有 overflow: hidden|auto，否则直接失效。
-
sticky适合导航栏、表格表头、侧边栏锚点等“滚动中吸附”场景 -
absolute仅当你明确需要脱离文档流 + 精确控制偏移（如气泡提示、下拉菜单）时才用 -
fixed只用于真正需要视口级固定的元素（如全局 toast、返回顶部按钮），别用在局部模块里
Sass里怎么封装position快捷函数
手写 top/right/bottom/left 太碎，又容易漏写 position 基础声明。Sass 的 @mixin 是最稳妥的封装方式，比 CSS 自定义属性更可控，也比 JS 注入更轻量。
关键不是堆参数，而是按使用意图分组：比如 pos-sticky 封装 sticky + top，pos-absolute-center 封装居中逻辑，而不是搞一个万能 pos($t, $r, $b, $l) —— 那样反而掩盖了语义。
- 避免用
@function返回字符串，Sass 函数不能插入声明，只能拼字符串，后期调试困难 - 给 mixin 加默认值，比如
@mixin pos-sticky($top: 0) { position: sticky; top: $top; } - 不要封装
position: static—— 它是默认值，显式声明反而干扰 reset 逻辑
@mixin pos-absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
为什么transform: translate()比top/left更适合居中
用 top: -50% 和 left: -50% 居中会触发重排（reflow），而 transform: translate(-50%, -50%) 只触发重绘（repaint），性能更好，尤其在动画或高频滚动中。
更重要的是语义清晰：translate 表达“偏移自身”，top/left 表达“相对于包含块偏移”——两者计算基准不同，混用极易出错。比如父容器用了 transform，子元素的 top 会相对这个新包含块计算，但开发者往往意识不到。
- 所有居中类 mixin 必须用
transform，哪怕多写一行 - 如果必须用
top/left（比如配合z-index做层级控制），要确保祖先没用transform或perspective - 移动端 Safari 对
transform的硬件加速支持更稳，top/left动画易卡顿
IE11兼容时sticky怎么降级
IE11 不支持 position: sticky，但强行用 JS 模拟（监听 scroll）成本高、易冲突。更务实的做法是：用 @supports 做渐进增强，对 IE11 回退为 relative + 手动控制位置，或者直接放弃吸附效果，保功能不保体验。
千万别用 Autoprefixer 的 /* autoprefixer: off */ 强行加前缀——sticky 在 IE 里就是不支持，加了 -ms- 前缀也没用。
- 用
@supports (position: sticky) { ... }包裹 sticky 样式，IE11 自动跳过 - 回退方案写在
@supports外面，比如默认用position: relative，再靠 JS 监听滚动微调（仅必要时） - 如果项目已弃用 IE，就别加任何兼容代码——Sass 编译后多出的 CSS 字节也是负担
复杂定位真正的难点不在写法，而在判断“这个元素到底该属于谁的坐标系”。父容器有没有 transform？有没有 overflow？滚动容器是不是 body？这些细节比 Sass 封装本身更容易让布局突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
