遮罩层需同时设置z-index和pointer-events：遮罩层z-index设9999、pointer-events:none，高亮框z-index设10000、pointer-events:auto；高亮位置须用getboundingclientrect动态计算并监听resize/scroll重算；driver.js的element参数仅支持字符串选择器，且需dom就绪后初始化。
遮罩层 z-index 和 pointer-events 必须配对设置
遮罩层盖不住下拉菜单、弹窗，或者点击高亮区域没反应——八成是层级或事件穿透没配对。遮罩层设 z-index: 9999，高亮框必须设更高（如 z-index: 10000），且目标元素自身不能设 z-index，否则会被压住；移动端尤其要注意：pointer-events: none 得加在遮罩层上，再单独给高亮框设 pointer-events: auto，否则按钮点不动。
用 getBoundingClientRect 动态算高亮位置，别硬写 CSS 偏移
目标元素可能是 #save-btn、.toolbar-item:nth-child(3)，也可能是 Vue 渲染后才出现的 div[data-role="editor-menu"]。硬写 top/left 会随布局、缩放、滚动失效。正确做法是：
- 调用
element.getBoundingClientRect()拿到top、left、width、height - 把高亮层（如
div.intro-highlight）设为position: fixed，并用 JS 动态赋值style.top等 - 监听
window.resize和window.scroll，重新计算——否则用户一滚动，高亮就飘到页面外了 - 若目标被
overflow: hidden截断，高亮层必须挂到document.body下，绕过父级裁剪
Driver.js 的 element 参数只认字符串选择器，不认 DOM 节点
常见报错是“高亮框没出现”或“下一步卡死”，往往因为 defineSteps() 里写了 element: document.querySelector('#format-btn')。v1+ 版本只接受字符串，比如：
driver.defineSteps([
{ element: '#format-btn', popover: { title: '格式化代码', position: 'bottom' } },
{ element: '.monaco-editor', popover: { title: '编辑区', position: 'right' } }
])
另外注意：
- 必须等 DOM 就绪后再初始化，Vue 用
mounted，React 用useEffect(() => {}, [])，别在DOMContentLoaded前 new Driver() - 如果目标元素初始
display: none或visibility: hidden，Driver.js 不校验可见性，高亮框会出现在视口外，控制台也不报错 - 步骤间跳转依赖
nextBtnText/prevBtnText，中文项目务必显式配置，否则默认英文
localStorage 检测首次访问要包 try/catch，且不能只靠 key 存在与否
用户清缓存、切标签页、关掉再进——这些都会让 localStorage.getItem('hasSeenIntro') 返回 null，但不代表真“首次”。更稳妥的做法是：
- 用
try { ... } catch包裹读写逻辑，避免 localStorage 不可用时整个引导崩掉 - 加上时间戳或版本号校验，比如存
{ seen: true, v: '2.1', ts: Date.now() }，防止旧版引导逻辑被新数据误触发 - 别假设用户一定按顺序点下一步：跳过某步、反复开关页面、前进后退混用，都得能恢复上下文——状态最好存在内存对象里，localStorage 只做持久锚点
最常被忽略的是：高亮框本身没交互意义，真正需要可访问的是它指向的按钮或输入框。确保目标元素有 tabindex="0"，支持键盘聚焦和 Enter/Space 触发，否则屏幕阅读器用户根本走不完流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
