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

Just another note... I was having the same issue and solved it by:

<div class='keepontop'>
 <div class='overlay'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
</div>

<script>
$('.overlay).fadeIn(500); 
$('.keepontop').css('position', 'relative'); 
</script>

.keepontop{
position:absolute;
z-index:999;
}

This allowed me to have one containg div that fixes the z-index issue, but also solved the click event issue for buried DIVs.

Answer 2

Put a div around your toggling div. Add style with position relative and correct z-index. (It can happen, that z-index 1 is not enough big for you, then try with higher level, etc. 100)

<div style="position: relative; z-index: 1;>
  <div id="component-to-toggle">
    ...
  </div>
</div>

This way the toggling component will hide when it supposed to but the div around will never and it will never loose it's z-index.

Answer 3

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!

Answer 4

I have the same issue, and I'd tried all this solutions and it didn't solve my problem...

What I did to solve it, was before calling the fade effect, I decreased the z-index for the element that was in front even with "lower" z-index... Than, I call the fade with the on complete function, so when my fade effect ends, and the z-index issue is automatically solved, I set back the z-index for the element I'd decreased at first.

<div class="concept">
    <div class="title">...</div>
</div>

<div class="content4>...</div>

<script>
    $('.concept .title').css('z-index', 0);

    $('.content4').fadeIn(600,function(){
       $('.concept .title').css('z-index', 1);
    });
</script>

// CSS

.concept { position: absolute; } 
.concept .title { position: absolute; z-index: 1; }

.content4 { position: absolute; z-index: 1000; }

Answer 5

Slidetoggle is really quirky... I've had a similar issue. The way I got it to work on my website was to just move the toggled div to the very bottom of my html. Because it comes last in the DOM, the z-index should be automatically set higher than the previous elements. Since it's absolutely positioned, you shouldn't have any issues with layout, either.