固定导航栏必须用 position: fixed 配合 top: 0 和 width: 100%，避免父容器 transform 等创建新层叠上下文；购物车按钮需内嵌于 nav 结构中，用 aria-label 动态更新、inline-flex 防跳动、margin-left: auto 布局，并设足够 z-index 和触控优化。
固定导航栏的 CSS 定位必须用 position: fixed
很多初学者直接给导航栏加 position: sticky 或只设 top: 0 却没配 position，结果按钮不随滚动固定。真正起效的是 position: fixed，且需配合 top: 0 和 width: 100% —— 否则可能偏移或宽度不足。注意：父容器的 transform、perspective 或 filter 会创建新的层叠上下文，导致 fixed 相对于该父级定位而非视口，这是最常被忽略的坑。
购物车按钮要放在导航内部，不能脱离结构流
把按钮塞进 或 absolute 叠在外部。否则响应式断点下容易错位，屏幕阅读器也读不到。推荐结构：
<nav class="navbar"><a href="/">首页</a> <a href="/shop">商品</a> <button class="cart-btn" aria-label="购物车，有3件商品">?<span class="cart-count">3</span></button> </nav>
关键点：
-
aria-label必须动态更新数量，否则无障碍失效 -
cart-count用display: inline-flex+min-width避免数字变宽时按钮跳动 - 不要用
float: right推按钮，改用margin-left: auto或justify-content: space-between（Flex 布局）
z-index 冲突会导致按钮被遮挡
固定导航栏常和轮播图、弹窗、侧边栏共存，一旦其他元素设了高 z-index（比如 z-index: 9999），购物车按钮就可能被盖住。解决方案：
- 给
.navbar设z-index: 1000（Bootstrap 默认值，够用） - 避免全局写
* { z-index: 1 }这类重置，它会让fixed失效 - 用浏览器开发者工具的「Layers」面板检查是否真在顶层，别只看 CSS 文件里写了多少
移动端点击热区太小，必须放大但不破坏布局
默认按钮在手机上只有 20px 高，手指点不准。不能只加 padding，否则横向撑开导航栏。正确做法：
- 用
padding+line-height控制高度，例如padding: 0.5rem 0.75rem - 图标用
font-size: 1.25rem，数字用font-size: 0.75rem缩小并vertical-align: top - 给按钮加
touch-action: manipulation减少 iOS 点击延迟 - 禁用
user-select: none，否则双击可能误触发选中
购物车图标本身没有语义，纯靠 aria-label 和数量 badge 传递信息，这两处漏掉任意一个，对键盘用户或屏幕阅读器就是不可用的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
