Support Forum

To Top Particle & z-index issue

Hello Ivo,

I have found a small issue which I was able to rectify but I wanted to let you know about it, and share it here in case it helps someone else. I also thought that when you do a future update to the templates you could update the "_to-top.scss" file to reflect the change since it follows the correct stacking order for css allowing the z-index property to work properly.

I ran across this issue in the "Medical" template because I like to have the To Top particle active on Mobiles, which of course requires modifying the particle to allow it to show up on mobile devices. What I found is that even though the To Top particle has a z-index of 999, and the features particle has a z-index of 4, the "features" particle will sit above the "to top" particle. There was also an issue with the left and right arrows for the "latest news" section in the footer, where the arrows sat on top of the "to top" particle.

Even though I noticed this because I modified the to top particle to be visible on mobiles. This issue can still occur on desktops & tablets given the right conditions.

The "features" particle on the homepage in the "g-intro" section has the position "relative". Removing the position allows the "to top" particle to sit above the features particle but of course then the features particle doesn't sit on top of the slideshow, so that doesn't work. With this information I realized it was a css stacking, or order, issue.

You currently have the z-index added like this so the z-index is nested inside the parent, the to top section.

#g-to-top {
.style1, .style2 {
#g-totop-button {
z-index: 999;
}
}
}


The solution I came up with was to move the z-index value to the parent, the "To Top" section, with the code below, which allowed it have the proper effect of the to top button sitting on top of everything else.


#g-to-top {
z-index: 999;
}


With that code added, it is no longer necessary to have the z-index attribute added to the #g-totop-button like the way you currently have it.


kind regards,

Michael
Responses (1)
Sorry, but you are not allowed to view the replies here.
Your Reply

Become an insider | Subscribe to our Newsletter
Subscribe to our mailing list and stay up-to-date with all our awesome releases, latest updates and amazing discount offers!