html中无原生引导层，需用css+js手动实现：通过fixed/absolute定位遮罩与提示框，实时计算目标元素坐标，处理overflow、pointer-events、滚动监听等细节；推荐driver.js或shepherd.js库。
引导层在 HTML 中没有原生支持，得靠 CSS + JavaScript 手动实现
浏览器不提供 guide-layer 或类似内置元素，所有“引导层”效果（比如高亮某个按钮、弹出提示气泡）都是用 position: fixed 或 position: absolute 叠加一层半透明遮罩 + 浮动提示框模拟出来的。新手容易误以为有现成组件，结果查文档半天找不到对应 API。
常见错误现象：Element is not visible（Selenium 报错）、点击穿透、遮罩盖不住弹窗、提示文字位置偏移——基本都源于定位逻辑没对齐真实 DOM 结构。
- 必须监听目标元素的
getBoundingClientRect()实时计算坐标，不能写死top/left - 遮罩层要用
pointer-events: none，但提示框本身要设pointer-events: auto，否则无法点击“下一步”按钮 - 若目标元素在
overflow: hidden容器内，需将引导层挂到body下，而非父容器内部
Vue/React 项目里直接用 driver.js 或 shepherd.js 更省事
这些库不是“黑盒”，它们本质就是封装了上面说的坐标计算、事件绑定和生命周期控制。比如 driver.js 的 defineSteps() 会自动处理滚动后重新定位，而手写容易漏掉 scroll 和 resize 监听。
使用场景：需要多步骤、带跳转、支持键盘导航（如按 Enter 进入下一步）的新手引导流程。
-
driver.js轻量（~12KB），适合简单流程；shepherd.js功能全（支持 Vue/React 绑定、i18n、动画钩子），但体积大一倍 - 注意
useModal: true配置项——它决定是否启用全局遮罩，新手常忽略这点导致引导层只高亮区域却不锁屏 - React 中若用
useEffect启动引导，要确保目标元素已挂载，否则document.querySelector()返回null
纯静态 HTML 页面想免 JS？只能用 CSS :target 模拟最简引导
这是唯一不依赖 JS 的方案，但能力极弱：只能响应 URL 锚点变化，无法自动推进、不能监听用户操作、不支持高亮非锚点元素。
适用场景：文档类页面，仅需点击标题跳转并轻微放大对应段落，比如帮助中心的“点击这里看配置说明”。
- HTML 中给目标元素加
id="config-section"，链接写成@#@#@#@#@#@#@#@#@#@0 - CSS 写
:target { animation: highlight 2s; }配合@keyframes highlight做闪烁效果 - 无法解决“用户没点链接就直接滚动过去”的情况，也不能做多步引导
移动端引导层必须处理 touch-action: none 和缩放冲突
iOS Safari 默认禁用双指缩放下的自定义手势，如果引导层覆盖了可滚动区域，用户可能无法滑动页面——这不是 bug，是浏览器策略。
性能影响明显：在低端安卓机上，每帧重算 getBoundingClientRect() + 强制重绘遮罩层，容易掉帧。
- 给遮罩层加
touch-action: manipulation允许滚动和点击，但禁用缩放 - 避免在
scroll事件里直接调用element.getBoundingClientRect()，改用IntersectionObserver或节流 - 不要用
transform: scale()做高亮放大，它会触发额外图层合成，不如用outline或box-shadow
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
