Question

我在my.bonify.de参加了登机之旅。它提供与introjs类似的体验。

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

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

我尝试使用我们自己的入职复制行为，但我无法让页面中的元素超越叠加层。

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

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>＆amp; <div class="introjs-helperLayer">

intro.js如何运作？

2 个答案: