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()<

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:

#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:

   
  





#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!