intro.js 是如何工作的？

Question

我在 my.bonify.de 进行入门介绍。它提供了类似于 introjs 的体验。

我们使用一个有很大阴影的裁剪 div 来实现这一点，非常丑陋。我们想改进它，并像 introjs 一样使用覆盖层，因为它似乎比我们的不良 hack 更具性能优势。

读完 这篇文章 后，我不明白 introjs 是如何运作的，因为需要突出显示的元素肯定应该位于较低的堆叠上下文中。

我已经尝试使用我们自己的入门介绍复制此行为，但是无法使页面中的元素升至覆盖层之上。

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

- rui.araujo

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Sahil

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/

- scooterlord

---

我找到了我的错误。有一个定义了z-index的父元素导致了问题，jsfiddle对于调试问题非常有用。 - rui.araujo

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"> 小。

- Learning