Element not clickable when its ancestor has a position fixed and z-index lower than the tour-backdrop which is sibling

[luisanogueira]

Hello! I am having an issue similar to one that was already closed, however the solution there proposed didn't work for me. I am not sure if I am missing something here, but this is the closed issue related to mine:

#38

I have a side menu (#sidebar) on my webpage which has a position fixed and has a z-index value of 1010. However, since the z-index of the .tour-backdrop element, which is a sibling of the fixed side menu, is higher, my element which should be highlighted is not clickable. The clickable element is a child of my #sidebar. I included the backdropOptions highlightColor: '#000' (my sidebar is also darker), and backdropSibling: true in the step where my child element should be highlighted, but it didn't work, the element #persons is not clickable and not highlighted. I noticed that if I include the backdropSibling as true the z-index of tour-backdrop reduces to 1029 value, which works fine on the case from the other issue, since the z-index is set to 1030 there, but not on my case.
It would be great if you could help me, maybe I am not seing something obvious! I reproduced my issue here:

https://jsfiddle.net/lufradenogueira/01qknhfu/76/

This is the one case that works fine and was reproduced on the issue related to mine:

https://jsfiddle.net/lufradenogueira/Lfme435a/9/

I know that just by increasing the z-index of my side bar with css it would work, however this is not a good solution here. I would like something that would work even if in the future the backdrop-tour element changes its css. Thank you in advance and keep doing the nice work you've done so far!

[IGreatlyDislikeJavascript]

Thanks for your report (and your feedback!). Unfortunately ibastevan has left us, so I'll have to try and figure this one out (I'm not a web coder).

I understand the issue. CSS etc isn't my thing and trips me up repeatedly. So if you (or anyone) can explain "how" to fix this problem, or what fix you want implemented, I can code it. In the meantime let me reproduce this in my local environment and see if I can figure out a fix.

[luisanogueira]

Hey, so I am also not sure what would be the best solution in this case, but maybe something more dynamic. If I understood right, what the solution did is that when you include the backdropSibling: true, it reduces the z-index of .tour-backdrop element to 1029, which was fine on the previous issue because the z-index of the fixed sibling of the tour-backdrop was higher, but is not on mine because 1029 is still higher than my element's z-index.
So maybe the solution would be to check if there are any ancestors of the element which we want to highlight on the step with position: fixed or absolute, and if yes, reduce the z-index of .tour-backdrop to one number lower of the z-index of the fixed parent or grandparent of the element to be highlighted. Is this possible with JS?
Currently it also sets a higher z-index to the element which we want to highlight on the step, but if the parent of this element is fixed and has a lower z-index it doesn't work as intended.