jQuery fadeIn on position：absolute cause z-index issue [英] jQuery fadeIn on position:absolute causes z-index issue

问题描述

在技术上我使用 fadeToggle（），但他们是表兄弟...基本上我的问题是我有一个绝对定位的div，我使用 slideToggle（），但Z-index没有被设置，直到动画完成。结果是，在淡化期间，相邻div（具有比一个衰落更低的z-索引值）的文本出现在更高的z上的div的衰落。

有人熟悉这个怪癖吗？知道任何解决方法？

编辑：请允许我澄清：当动画完成时，z-index正确解析，但在转换期间文本在它的顶部。

解决方案

我只是有同样的问题，所以我以为我会分享解决方案。如你所说jQuery做了一些与 fadeIn（）， fadeOut（）， slideToggle（） 等，当元素绝对定位在一个 z-index 时，其下面的元素也被定位为绝对的，并给出了一个 z-index 。

如果你删除底部元素，你会注意到你的动画运行正常。但是，在子元素中，只有当它完全淡出时，才会得到你的淡入淡出，这是因为只有动画完成后，才会确认 z-index 。 >

解决方案是在每个元素周围创建一个容器，您可以围绕所有元素创建一个容器，但请记住，您不会有任何悬停或对于容器div存在的子元素的点击效果。

所以在我的例子中，我只需要使用一个你想要淡入的div，所以让我们说你有一个放大功能，在动画中被掩埋：

 < div id =zoomin> ;< / div> 
 
 #zoomin {
 position：absolute;顶部：20px;右：20px; 
 display：block; z-index：15; 
 width：47px; height：48px; 
} 
  

目前放大将消失。所以解决方案是将其包装在一个容器中，并将以下css应用于该容器：

 <！ - 这是你的容器 - > 
< div id =zoomincontainerclass =keepontop> 
 
<！ - 这是你的div  - > 
< div id =zoomin>< / div> 
 
<！ - 结束容器 - > 
< / div> 
 
 #zoomincontainer {
 top：20px;右：20px; 
 with：47px; height：48px; 
} 
 
 div.keepontop {
 position：absolute; z-index：14; 
} 
  

这将为您的div应用一个基础，并将其保留在其他的顶部请注意，由于您的'zoomin'div绝对定位，因此您必须将宽度，高度和位置特征应用于容器'zoomincontainer'div 。否则，您将在页面/框架左上角的0px x 0px尺寸上找到您的容器div，它不会成为任何东西的基础，除非它覆盖了您正在动画的div下方的整个区域。

我把PA和z-index放在'keepontop'类中，以防你有一些div被淡入淡出。

现在就像一个魅力一样。我希望这有帮助！

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.

解决方案

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!

这篇关于jQuery fadeIn on position：absolute cause z-index issue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！