Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

autoAlpha and z-index

Recommended Posts

I've noticed a strange behaviour when using autoAlpha on elements that have a z-index set. 


Is there any way to stop the fading in from interfering with the z-index?


See CodePen 

See the Pen EyYNbz by friendlygiraffe (@friendlygiraffe) on CodePen

Link to comment
Share on other sites

I suspect that this is related to how stacking contexts work




Jonathan, is the resident expert on these things.


With your current DOM structure I'm not sure why you need z-index or use it that way, but I have to assume there is something I am missing.

  • Like 1
Link to comment
Share on other sites

Hello friendlygiraffe,


This is not a autoAlpha GSAP thing! This is caused due to the CSS stacking context Carl described above! Since the browser will place transforms and opacity on their own rendering layer. Giving them a new stacking context, and overrides the order of your HTML when using CSS position offsets.


The order of the HTML is already ok, By you adding the z-index you are changing the stacking context. And that can get hairy since your applying opacity on an statically positioned element #endbox which gives it a stacking context, and that will interfere with the stacking context you already have on its child .cta a.


You need to make #endbox have the same z-index as its child .ctx a:


See the Pen EyYZLN by jonathan (@jonathan) on CodePen


As a rule of thumb any time you use CSS position offsets like position absolute. You should always have a parent element with position relative. This way your absolutely positioned element will be positioned relative to their parent. Helping with cross browser positioning of CSS


#endbox {
  z-index:1001; /* #endbox gets same z-index as its child .ctx a */


So technically you can remove all z-index from your CSS, and see that the .cta a button stays on top. Stacking without z-index:


See the Pen Megpaj by jonathan (@jonathan) on CodePen


You also don't need to have a z-index on your .cta a:hover CSS rule since the z-index will be inherited from .cta a.


Also since you are using an <a> tag, as a button. You should always add the display property display: block. Even if defining a width and height. That just helps with cross browser issues. Since by default, <a> tags have a default display of inline.



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

Stacking without z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index


Happy Tweening!



  • Like 4
Link to comment
Share on other sites

Phenomenal, Jonathan.

  • Like 1
Link to comment
Share on other sites

Phenomenal, Jonathan.

I don't know. Seemed a little vague to me. Jonathan may need to brush up on his CSS and browser knowledge.  :-D


Great info as always Jonathan. :)

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