Jump to content
Search Community

Help with z-index on pinned item.

Stickguy test
Moderator Tag

Recommended Posts

I have a series of divs that I am pinning to the top of the screen with Scrolltrigger. I have a title that scrolls on with one of the sections that I would like to pin in place so that it stays in place over the next few divs that scroll in. I have that setup but when the next div scrolls in it is still getting covered regardless of the z-index. Is there a way to ensure that the pinned title will stay on top of the divs that follow it?

See the Pen yLJeGyZ by Stickguy (@Stickguy) on CodePen

Link to comment
Share on other sites

The thing here is that the title (Sticky Title, I'm assuming) is in a position:fixed inside a position:absolute inside a position:absolute inside a position:relative (etc.) ... anything but static. Each of these is squeezing the scope of z-index.

 

If it has to be there from a markup standpoint, I would advise, once reached, you use a bit of DOM manipulation to break it free from the positioned parents and let it live closer to the surface of the overall parent container.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...