intro.js如何工作？

Question

我在my.bonify.de上了乘车游览。 它提供了与introjs类似的体验。

我们使用带有很大盒子阴影的抠图div以非常难看的方式实现了这一点。 我们希望对此加以改进，并使用诸如introjs之类的覆盖，因为它似乎比我们的肮脏黑客要好得多。

阅读完此内容后 ，我不了解introjs的工作原理，因为要突出显示的元素肯定应该在较低的堆栈上下文中。

我已经尝试通过自己的入职复制行为，但是我无法使页面中的元素超过叠加层。

我想知道introjs是如何实现的，我认为这段代码是秘密，但是当我放置调试器时，不会添加该类。

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;
}

这是一个有效的小提琴： https : //jsfiddle.net/7ergcfvq/1/

Answer 2

看一下intro.js的演示步骤1， <h1>Intro.js</h1>元素具有.introjs-relativePosition和.introjs-showElement ，因此它的position:relative和z-index:9999999!important 。

并且<div class="intros-overlay">的z-index 999999小于<h1> ＆ <div class="introjs-helperLayer">