The introjs-helperLayer element cover the Introduced element

[switer]

When give element style position: absolute and z-index,the introJS's introjs-helperLayer element has covered the Introduced element.

[mkhatib]

This also happens with elements contained in a fixed position parent. The Intro helper layer covers the element. Apparently one way to solve this is to set helper layer to relative but that would screw up the positioning for it.

[afshinm]

Thanks for report @switer. Could you guys prepare an online example of the problem, @mkhatib, @switer?

[karlintellipharm]

Happens for me if any parent has a z-index defined regardless of positioning. Easy to reproduce on http://usablica.github.io/intro.js/ by using your browser's code inspector to give div.jumbotron position:relative; z-index:1;

[switer]

As above @karlintellipharm

[afshinm]

Thanks guys. I'll release a patch asap.

[armanso]

when element position set to relative all child z-index conformity from parent ! see this example. http://jsfiddle.net/Vd88E/ but i don't have any solution

[afshinm]

I fixed that. Could someone check that the problem is solved or not? I need a confirm.

[switer]

@afshinm No, the problem still exists.Please Look at my website http://switer.github.io/imper/ as example, click the last button(intro-helping) of the left toolbar to start intro.js.@chrome win 26.0.1410.64 m

[afshinm]

@switer Ok, your problem is different. Simply update your css file with https://github.com/usablica/intro.js/blob/master/introjs.css

Let me know if your problem solved with this update.

[switer]

Thanks @afshinm , this problem has been solved. http://switer.github.io/imper/

[mamezito-zz]

still has the problem with elements that are sitting in parent that has fixed position https://www.dropbox.com/s/8su6flx0upkvxfd/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-03-14%2019.41.36.png

[sharpnk]

@mamezito The problem with fixed parent is likely related to Issue #96. Try this: https://github.com/usablica/intro.js/pull/240

[mamezito-zz]

tried, but this causing the scrolling of the element, but element must be sticked, so doesnt help ( sorry

[farzad-salimijazi]

We had same problem when I was using slight animation for specific div by removing animation effect problem solved.

[msantos142]

Hi, any news on this issue? Tried to solve by myself manipulating the .introjs-showElement class but as expected it's not an aswer. Thanks

[afshinm]

Can anyone create a jsfiddle for this?

[MarkHerhold]

@afshinm I would like to purchase a license, but this issue is causing me problems. I can temporarily grant you access to my repo with setup instructions if you want to see the bug yourself.

[ropeladder]

@afshinm I'm having a similar issue with position: fixed elements (although it works ok with position: absolute. I put up an example here: https://jsfiddle.net/7on23oku/1/

[sarbjit399]

@afshinm I have the similar issue. I have added the into.js step on one of my dropdown li. whose parent dropdown ul is in position: absolute and with z-index value. When step is visible intro.js add introjs-fixParent class which resets the z-index value by adding z-index: auto !important; and because of that it hides behind the searchbox you can see in the screenshot that searchbox comes on top of the dropdown. Actually it hides behind any div which has position: relative; or fixed

this is what it looks like when there is no overlay. Thanks in advance

[saddy-smoky]

I had a similar problem. The parent block had a "perspective: 1000px". After removing this property, it all worked

[sdawson26]

I also had a similar problem (trying to highlight some features on a mobile-friendly sidebar). It turns out the property will-change used in a few areas of my sidebar was causing the problem. This fixed it:

.introjs-fixParent * {
  will-change: inherit !important;
}

[molidort]

The problem occurs when the element is using css animations like fadeIn/Out.

[twigs67]

I'm using introJs on a collapsing sidemenu. Unfortunately, removing fixed position isn't available to me. However, I have verified that switching the position from fixed to relative/absolute does work. Is there another solution to this problem?

[conlaoch1]

i have the exact same issue with position: fixed

[divChecker]

Hello,

I have the same issue. I tried some solutions mentioned here, but still can't fix it. The element with index:9999999 from intro js "introjs-showElement" class seems not to work.