fixed定位导航条需设width:100%或left:0;right:0、z-index≥1000；box-shadow用0 2px 8px -2px rgba(0,0,0,0.1)等合理参数；锚点需scroll-margin-top:60px补偿；移动端加contain:paint防抖动。
fixed定位导致导航条脱离文档流，必须手动设置宽度和z-index
用 position: fixed 做悬浮导航条时，元素会脱离正常布局，父容器的宽度不再继承，容易出现“只占内容宽”或“撑满整个视口”的意外表现。常见错误是没设 width 或 left/right，结果导航条在小屏上溢出、大屏上留白。
必须显式控制尺寸和层叠顺序：
-
width: 100%最安全，但若页面有左右 padding，建议改用left: 0; right: 0 - 一定要加
z-index: 1000（或更高），否则可能被轮播图、弹窗等遮挡 - 若导航条内含
max-width: 1200px的容器，需确保外层fixed元素不截断它——通常把fixed加在最外层 wrapper 上，内部再套居中容器
box-shadow参数调不好，阴影会“浮空”或“贴边”
box-shadow 四个值的顺序是 offset-x offset-y blur-radius spread-radius，新手常误以为第三个值越大阴影越重，其实 blur-radius 过大会让阴影虚得看不见边缘，而 spread-radius 才真正控制阴影大小扩张。
实用配比（适配大多数深色/浅色背景）：
- 轻量悬浮效果：
box-shadow: 0 2px 8px -2px rgba(0,0,0,0.1)（负spread-radius收紧阴影，避免发散） - 强调层级感：
box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15)（spread-radius: 0保持自然衰减） - 慎用
inset：它会让阴影向内投射，和浮动导航的“抬升感”冲突，基本不用
fixed导航在滚动时遮挡锚点链接，需要预留顶部偏移
点击页面内 #section2 这类锚点后，浏览器会把目标元素顶到视口顶部——但 fixed 导航条盖在上面，实际内容被挡住。这不是 CSS 能自动修复的问题，得靠补偿位移。
- 最简方案：给所有锚点目标元素加
margin-top: -60px（假设导航高 60px）+padding-top: 60px抵消布局塌陷 - 更健壮的做法：用
:target伪类动态加偏移，例如:target { scroll-margin-top: 60px; }（现代浏览器支持，无需 JS） - 注意：
scroll-margin-top是逻辑属性，不兼容 IE，如需支持旧浏览器，仍得回退到 margin/padding 组合
移动端 fixed定位卡顿或闪烁，别忽略-webkit-overflow-scrolling
iOS Safari 对 fixed 元素在可滚动区域内的渲染有历史问题：快速滚动时导航条可能短暂消失、错位或触发闪屏。根本原因不是 shadow，而是 WebKit 的合成层策略。
- 在 body 或滚动容器上加
-webkit-overflow-scrolling: touch可启用原生滚动，大幅缓解 fixed 元素抖动 - 但该属性已废弃，仅 iOS 15 前有效；iOS 16+ 推荐改用
contain: paint在导航条自身上，限制重绘范围 - 阴影本身不加重卡顿，但
blur-radius > 12px在低端 Android 设备上可能触发软件渲染，建议控制在8px内
top 值必须明确设为 0，哪怕你写了 inset: 0，某些安卓 WebView 仍会按默认 top 计算——这会导致阴影位置偏移，且无法通过 devtools 直观发现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
