intro.js 是如何工作的？

Question

我在 my.bonify.de. It offers a similar experience to introjs 进行登机旅行。

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

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

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

我想知道 introjs 是如何做到这一点的，我认为 this block of code 是秘密，但是当我放置调试器时 class 没有被添加。

Answer 1

查看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">

Answer 2

很简单，您只需将具有较高 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/

intro.js 是如何工作的？

How does intro.js works?

html

javascript

css

intro.js