intro.js 将底层元素向左移动并相互重叠答案

【问题标题】：intro.js moves underlying elements to the left and overlapping each otherintro.js 将底层元素向左移动并相互重叠
【发布时间】：2015-01-19 03:54:25
【问题描述】：

我尝试在一个流星项目上安装 intro.js：

我正在使用 bootstrap 3 和流星。我想知道元素的位置是否需要以不同的方式显示。

    var intro = introJs();

    intro.setOptions({
        steps: [
            {
                element: '#newGame',
                intro: 'welcome to step one'
            },
            {
                element: '#openModal',
                intro: 'step two challenge a friend'
            }
        ]
    });
    intro.start();



<a href="#" class="btn btn-primary" id="newGame">Play Random Opponent</a>
                        <button class="btn btn-primary" data-toggle="modal" id="openModal"
                                data-target="#challengeModal">Challenge a Friend</button>

【问题讨论】：

你是如何在流星上安装 intro.js 的。

标签： javascript css twitter-bootstrap meteor intro.js

【解决方案1】：

目前在 webkit 浏览器上的 intro.js 存在问题。该库与 fireFox 和 IE 配合得很好，但是当涉及到 Chrome/Opera/Safari 时，它就有这个问题。问题在于z-index。

有关问题的详细信息，请访问： https://github.com/heelhook/chardin.js/issues/26

关于 z-index 如何与访问一起工作的详细说明： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

如果您想要与intro.js 相同的更简单的库，请查看guide.js https://github.com/Dozyatom/guide.js

【讨论】：

【解决方案2】：

我们看到了一个类似的问题，一旦一个元素被 introJS 定位，它就会附加一个名为 .introjs-relativePosition 的类，这会导致位置略微移动。

我们通过覆盖 CSS 中的规则解决了这个问题

.introjs-relativePosition {
  position: initial !important;
}

【讨论】：

【解决方案3】：

也许你可以在introJs 启动之前使用setTimeout 函数。下面的代码对我有用

setTimeout(function() { introJs().start(); }, 5000);

【讨论】：

【解决方案4】：

我找到了解决办法

我不是 CSS 人，但这很好用

.introjs-overlay {
    display: none !important;
}
.introjs-helperLayer {
border-radius: 0.5em !important;
border: 0.2em solid rgba(255, 255, 255, 0.9) !important;
box-shadow: 0 0 0 1000em rgba(0, 0, 0, 0.7) !important;
pointer-events: none;
}

指针事件：无；是导致此问题的原因

【讨论】：