intro.js是如何工作的？

Question

我在my.bonify.de有一次登机旅行。它提供了与内省类似的体验。

我们以一种非常丑陋的方式实现了这一点，使用了一个带有一个非常大的框影的裁剪div。我们希望在此基础上进行改进，并使用类似introjs的覆盖，因为它似乎比我们的肮脏攻击具有更好的性能。

阅读了这之后，我不明白为什么导入to是如何工作的，因为要突出显示的元素肯定应该在较低的堆叠上下文中。

我试着用我们自己的上线板复制这种行为，但是我不能让页面中的元素在覆盖层之上。

我想知道导入器是如何实现这一点的，我认为这段代码是其中的秘密，但是当我将调试器放入调试器时，类就没有添加了。

Answer 1

简单点，您只需在一个固定元素的顶部放置一个z索引较高的相对元素。样本类：

.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指数999999，比<h1> & <div class="introjs-helperLayer">小。