要使导航栏实现 position: sticky 吸顶效果，必须设置 top 值（如 top: 0），确保父容器无 overflow: hidden/transform 等干扰，且页面有足够高度内容触发滚动粘性行为。
悬浮导航栏位置布局的核心在于：**用 position: fixed 或 position: sticky 控制定位方式，再靠 top/right/bottom/left 和 z-index 精确落位，同时必须处理内容遮挡和层叠上下文干扰。**
fixed 定位时如何让导航栏真正“悬在顶部”
直接写 position: fixed; top: 0; 很可能看不见——不是没生效，而是被其他元素盖住了。
- 必须显式设置
z-index，且值要大于所有同级或父级容器（常见坑：z-index: 999不够，试试z-index: 1000或更高） -
background-color不可省，否则文字会和滚动内容重叠（尤其浅色文字+白色背景内容） - 或主内容区得加
padding-top（值 = 导航栏实际高度），否则首屏内容会被遮住；用margin-top容易导致页面跳动 - 若导航栏内有子元素用了
transform或filter，可能意外创建新层叠上下文，间接压低导航层级 - 父容器不能有
overflow: hidden、overflow: auto或transform（哪怕只是transform: translateZ(0)） - 父容器高度必须足够，确保滚动能触发临界点；如果父容器只有
height: 0或被display: none，sticky 直接不工作 - 必须声明
top（或bottom），只写position: sticky不生效 - 兼容性注意：IE 完全不支持，iOS Safari 旧版本对
flex+sticky组合有 bug - 别用
right: 20px+top: 50%再靠transform: translateY(-50%)—— 滚动时top: 50%是相对于视口，但transform基于自身尺寸，容易错位；改用top: calc(50vh - 32px)（假设图标高 64px）更稳 - 若父容器有
padding或border，right: 0实际位置会偏移，应把固定元素提到直接子级 - 移动端需额外加
@media (max-width: 768px)关闭右侧悬浮栏，或改为底部固定，避免遮挡操作区域 - 任何设置了
position: relative+z-index的父元素，都会创建新层叠上下文，其内部所有子元素的z-index都只在这个上下文内比较——所以即使你导航栏设了z-index: 9999，只要它父级的z-index: 1，整个导航就输给同级另一个z-index: 2的 section - 最稳妥解法不是狂堆
z-index，而是检查并移除不必要的position: relative（比如仅用于伪元素定位的容器） - 如果必须保留父级定位，就在导航栏上加
isolation: isolate强制创建独立层叠上下文，再配z-index
sticky 定位为什么有时“粘不住”
position: sticky 看似简单，但失效原因非常隐蔽，多数不是代码写错，而是布局环境不满足。
右侧悬浮导航栏（如回到顶部按钮）怎么居中不偏移
右侧固定栏常出现“随滚动上下漂移”或“离右边界忽远忽近”，问题多出在定位基准和尺寸计算上。
z-index 失效的典型场景和绕过方法
明明写了 z-index: 9999，导航栏还是被盖住，大概率是撞上了层叠上下文（stacking context）的隐形规则。
真正难的不是写几行 CSS，而是理解 fixed/sticky 的行为边界、z-index 的作用域限制，以及浏览器如何根据父容器属性动态调整定位逻辑——这些地方一错，调试时往往要花半小时找一个 overflow: hidden。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
