z-index on animated image

[nick2price 2 Likes (Newbie)]

Hi all, once again apologies for the lack of Codepen link, it keeps complaining that I am spam when I try to fork, even though I am not even logged in.  Anyways, I have made a JSFiddle instead.

 

I am hoping my issue is pretty simple, not even sure it is related to GSAP.  So I have two sections.  Within the top section, I have an image which I have placed at the bottom using flex.  The idea is simple, as I scroll down, the image should slide up into place.  

 

I have got this to work, but I have noticed that when the image is within section 2, it sits on top of this section, instead of behind it.  Ideally, you should not be able to see any of this image within section 2.  I have tried giving some z-indexes, but this does not seem to make a difference.

 

Is there any way to stop the animated image from sitting on top of section 2?

 

Thanks

See the Pen by z69w9u4g (@z69w9u4g) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi @nick2price

 

You are correct - this has nothing to do with GSAP. I'm honestly not sure where the z-index problem might be since you're loading the Bootstrap CSS along with your own style sheet. It's a lot to look through and I've never used Bootstrap. My advice would be to try it without Bootstrap even if it isn't pretty. If the z-index works correctly without that external CSS, you'd at least have a place to look. Here's a basic example of an image sliding up from behind the next div. You'll notice setting a z-index is not even necessary because of the natural stacking order of the DOM elements. 

 

See the Pen gXOMZV by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.