javascript - jQuery fadeIn on position:absolute causes z-index issue

Question

Technically I'm using fadeToggle() but they're cousins... basically my issue is that I have an absolutely positioned div which I am using slideToggle() on but the Z-index is not being set until the animation completes. The result is that during the fade the text in a neighboring div (which has a lower z-index value than the one fading in) appears "on top of" the fading in div with a higher z-index.

Is anyone familiar with this quirk? Know of any workarounds?

EDIT: Allow me to clarify: when the animation COMPLETES, the z-index resolves correctly, but during the transition the text is on top of it.

Answer 1

I just had the same issue so I thought I would share the solution. As you said jQuery does something with fadeIn(), fadeOut(), slideToggle() etc when the elements are absolutely positioned with a z-index, with elements below it also positioned as absolute and given a z-index.

If you remove the bottom elements you'll note that your animation runs fine. But with the 'sub-elements' you only get your fadeIn when it is totally faded in. That's because the z-index is only acknowledged once the animation completes.

The solution is to create a container around each element that you are fading in. You can alternatively create a container around all elements, but keep in mind you won't have any hover or click effects for the sub-elements where the container div exists.

So in my example I'll just use one div that you're trying to fade in. So let's say you have a 'zoom in' feature that is getting buried during the animation:

<div id="zoomin"></div>

#zoomin {
  position:absolute; top:20px; right:20px; 
  display:block; z-index:15;
  width:47px; height:48px;
}

Currently zoom in will disappear. So the solution is to wrap it in a container and apply the following css to that container:

<!-- this is your container -->
<div id="zoomincontainer" class="keepontop">

  <!-- this is your div --> 
  <div id="zoomin"></div>

<!-- end container -->
</div>

#zoomincontainer {
  top:20px; right:20px;      
  with:47px; height:48px;
}

div.keepontop {
  position:absolute; z-index:14;
}

This will apply a foundation for your div and keep it on top of the other layers during the animation.

Note that because your 'zoomin' div is positioned absolutely, you have to apply the width, height and position characteristics to your container 'zoomincontainer' div. Otherwise you'll find your container div up on the top left corner of your page / frame with 0px x 0px dimensions - it won't be a foundation for anything unless it covers the entire area beneath the divs you are animating.

I put the PA and z-index in the 'keepontop' class in case you had a number of divs that you are fading in and out.

Works like a charm now. I hope this helps!