position: fixed 是实现返回顶部悬浮按钮的唯一合理方案，因其脱离文档流、始终相对于视口定位且滚动时位置恒定；需配合 html{scroll-behavior: smooth}、#top 锚点及 right/bottom 像素值定位，并设 z-index ≥ 999 防遮挡。
fixed 定位实现全局悬浮按钮（如返回顶部）
直接用 position: fixed 是最稳妥的方案，它让元素脱离文档流、相对于视口定位，滚动时纹丝不动。关键不是“能不能固定”，而是锚点和滚动行为是否协同。
- 必须配
html{scroll-behavior: smooth}，否则点击跳转会生硬抖动 -
#top锚点要放在内部靠前位置，且建议加margin-top: -80px; padding-top: 80px;避免跳转后顶部被导航栏遮挡 - 右下角定位推荐用
right: 24px; bottom: 24px;，而非百分比——小屏下百分比容易贴边溢出 - z-index 至少设为
999，避免被第三方组件（如弹窗、广告 SDK）覆盖
absolute 定位实现局部悬浮图层（如图片水印、标签）
绝对定位本身不悬浮，它只是“脱离文档流 + 相对最近的已定位祖先定位”。真正实现“悬浮感”的前提是父容器必须是 position: relative 或其他非 static 值。
- 常见错误：父容器没设
position: relative，结果.floating-img相对于定位，一滚动就飘走 -
z-index必须配合定位使用——对static元素设z-index无效 - 响应式场景下，
top/right建议用px或rem，避免用%导致不同尺寸下偏移失准 - 若父容器本身有
overflow: hidden，且子元素absolute又没设z-index，可能被裁剪——这不是 bug，是 BFC 限制
sticky 定位实现条件式悬浮（如吸顶导航、目录锚点）
position: sticky 是唯一既保留在文档流中、又能在滚动阈值触发后“粘住”的定位方式。它不像 fixed 那样永远钉死，也不像 absolute 那样彻底脱离布局。
- 必须配合
top（或bottom）值才生效，单独写sticky等同于static - 父容器高度不能为
0，否则没有滚动空间，sticky 永远不触发 - 不要在 sticky 元素上设
transform（如scale()），Chrome 115+ 会直接禁用 sticky 行为 - IE 完全不支持，需降级为
fixed+ JS 监听scroll，但要注意节流，否则卡顿明显
hover + transition 实现悬停反馈（如 Tooltip、展开菜单）
纯 CSS 悬停效果依赖两个核心：触发元素的定位上下文 + 提示层的显示控制逻辑。很多“失效”问题其实出在 DOM 结构或层级关系上。
- tooltip 容器必须是触发元素的相邻兄弟或子元素，否则
:hover无法穿透作用域 -
visibility: hidden+opacity: 0是安全组合，只用display: none会导致 transition 失效 - 动画方向要匹配用户预期：顶部 tooltip 用
bottom: 100%+transform: translateY(-10px)，而非top: -100%（后者在滚动时易错位） - 移动端 hover 不可靠，需额外用
focus-within或 JS 添加is-active类来兼容触屏
position: fixed，而是判断该用哪种定位、在哪一级设参考点、以及如何让它们在滚动、缩放、触屏、老浏览器这些现实条件下依然稳定。定位不是孤立属性，它和文档流、BFC、堆叠上下文、甚至 scroll event 的触发时机都咬合在一起。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
