Как работает intro.js?

Question

У меня есть посадочный талон на my.bonify.de. Он предлагает аналогичный опыт introjs.

Мы внедрили это очень уродливым способом, используя вырезной div с очень большой теневой коробкой. Мы хотели бы улучшить это и использовать наложение, такое как introjs, так как оно, кажется, имеет намного лучшую производительность, чем наш грязный взломать.

Прочитав this, я не понимаю, как работает introjs, поскольку элемент, который должен быть выделен, определенно должен быть в более низком контексте стекирования.

Я попытался воспроизвести поведение с помощью собственного бортового оборудования, но я не могу заставить элемент на странице подняться над наложением.

Я хотел бы знать, как introjs достигает этого, я думал, что this block of code был секретом, но когда я кладу отладчик, класс не добавляется.

Answer 1

Легко, вы просто положить относительный элемент с более высоким индексом г-на вершине фиксированного элемента. Примеры классов:

.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

Посмотрите на демонстрационном этапе 1 intro.js, то <h1>Intro.js</h1> элемент имеет .introjs-relativePosition и .introjs-showElement, поэтому он получил position:relative и z-index:9999999!important.

И г-индекс 999999<div class="intros-overlay"> «s, меньше <h1> & <div class="introjs-helperLayer">