javascript - intro.js 是如何工作的？

Question

我在 my.bonify.de 有一个登机之旅.它提供与 introjs 类似的体验.

我们以非常丑陋的方式实现了这一点，使用了带有非常大的框阴影的 cutout div。我们想对此进行改进并使用像 introjs 这样的覆盖层，因为它似乎比我们的肮脏 hack 有更好的性能。

已阅读 this ，我不明白 introjs 是如何工作的，因为要突出显示的元素肯定应该在较低的堆栈上下文中。

我已尝试通过我们自己的入职培训复制该行为，但我无法让页面中的元素上升到叠加层之上。

我想知道 introjs 是如何实现的，我认为 this block of code是 secret ，但是当我放置调试器时，没有添加该类。

Answer 1

很简单，您只需将具有较高 z-index 的相对元素放在固定元素之上即可。示例类:

.fixed-elem {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  background: rgba(0,0,0,0.75);
}
.relative-elem {
  position:relative;
  z-index:10;
}

这是一个有效的 fiddle : https://jsfiddle.net/7ergcfvq/1/