遇到intro.js - 一种指导用户如何使用软件界面的非常酷的方式。我深入研究了源代码，但是想知道是否有人可以简单地解释代码实现突出显示的区域（特别是尺寸/位置/ zindexing）以实现效果。
提前致谢 杰
答案 0 :(得分：32)
我是Afshin，Intro.js的作者。让我向您介绍它实际上是如何工作的。
在聚焦/突出显示的元素中，发生了两件不同的事情：
1）制作一个辅助层。辅助层是聚焦元素中的白色圆角层
2）更改目标元素的z-index和position，以便将元素置于页面中所有其他元素的前面。
如果目标元素（应该聚焦/突出显示的元素）的位置是：
<强>绝对/相对：
IntroJs只是将目标元素z-index设置为9999999，因此目标元素会转到页面中所有其他元素的前面。
<强>静态：
现在，IntroJs将目标元素位置设置为relative，然后将z-index设置为9999999。
现在，目标元素位于页面中所有其他元素的前面。因此，最后一步仍然是，创建辅助元素。
为了创建辅助图层，IntroJs只获取目标元素的高度，宽度，顶部和左侧，然后创建一个div类introJs-helperLayer（和位置absolute）和将其附加到body。
<强>结论
为了专注于一个元素，IntroJs做了两个步骤，首先创建一个辅助层（页面中的圆角层），然后制作目标元素内容relative，以便将它带到前面。页面中的所有元素。
答案 1 :(得分：3)
嗯 - 非常简单。