Jump to content
Search Community

z-index changes to zero

AsKadir test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi!

I have some problem with Tweenmax, when I use it to my div it changes its z-index.

My example:

html: <div class="portfolio-container">
                    <div class="portfolio-nav">
                            <button id="prev"><h1><a href="portfolio6.html">prev</a></h1></button>
                            <button id="next"><h1><a href="portfolio2.html">next</a></h1></button>
                     </div>
                     <div class="portfolio-pagination">........

       ....</div>

css: .portfolio-container: {z-index: 100;}

js: TweenMax.from('.portfolio-container', 1, {x: "-100%", ease: Expo.easeInOut});

 

Matrix is working good, but my z-index: 100, becomes z-index: 0.

I met this before and find that with position: absolute it works and doesn’t change index, but my div should be relative.

Can you help me, please?

Thanks.

 

Link to comment
Share on other sites

6 hours ago, OSUblake said:

I can't help you without a demo, but this has nothing to do with GSAP. Please read about the stacking context.

 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

 

 

Thanks, I know that without a demo it’s hard to help.

But my question isn’t about z index positioning, I know positioning.

So I use position absolute, because I read all problems with z-index and a 95% has the same issues and found only two solutions:

1) change position to absolute

2) change z-index of div in js

Link to comment
Share on other sites

5 hours ago, Jonathan said:

Yes @OSUblake is right the default z-index is auto. So in order to use z-index you must use either position (absolute, fixed, or relative), otherwise z-index will not be applied.

 

z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

 

Happy Tweening! :)

I didn’t wrote position relative here, I forgot about that, but neither it doesn’t work.

I used position relative and my z-index 100, but after tweenmax z-index of my div becomes zero.

Thank for your answer.

Link to comment
Share on other sites

11 minutes ago, AslanGoi said:

But my question isn’t about z index positioning, I know positioning.

 

I completely understand your question. The problem has to do with the positioning and z-index of some of your elements. Make a simple demo and I will show you. It's a CSS issue.

 

 

 

This question has been asked more than once, like here. 

 

 

 

  • Like 5
Link to comment
Share on other sites

16 hours ago, AslanGoi said:

So I use position absolute, because I read all problems with z-index and a 95% has the same issues and found only two solutions:

1) change position to absolute

2) change z-index of div in js

 

You forgot about number 3 that @OSUblake advised which is:

 

3) add a new stacking context

 

On what element you ask and how?  .. That's a great question!

 

If you create a limited codepen demo example we can see see how it can solve your issue when we see your code live and in an editable environment to better help you.

 

 

Thanks and Happy Tweening :)

  • Like 4
Link to comment
Share on other sites

16 hours ago, OSUblake said:

 

I completely understand your question. The problem has to do with the positioning and z-index of some of your elements. Make a simple demo and I will show you. It's a CSS issue.

 

 

 

This question has been asked more than once, like here. 

 

 

 

Thanks!!!

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...