jQuery fadeIn on position：绝对导致z-index问题
从技术上讲，我正在使用fadeToggle()但他们是表兄弟…基本上我的问题是我有一个绝对定位的div，我正在使用slideToggle() ，但Z-index在动画完成之前没有被设置。 结果是在淡入淡出期间，相邻div中的文本（其z-索引值低于一个淡入的z-index值）出现在“具有较高z-index的div中的淡入淡出”之上。
有人熟悉这个怪癖吗？ 知道任何变通方法吗？
编辑 ：请允许我澄清：当动画完成时，z-index正确解析，但在转换过程中，文本位于其上方。
我刚才有同样的问题，所以我想我会分享解决方案。 正如你所说jQuery使用fadeIn() ， fadeOut() ， slideToggle()等做了一些事情，当元素绝对定位有z-index ，其下面的元素也定位为绝对并给定z-index 。
如果你删除底部元素，你会注意到你的动画运行正常。 但是对于’子元素’，只有当它完全消失时才会获得你的fadeIn。这是因为只有动画完成后才会确认z-index 。
解决方案是围绕您正在淡入的每个元素创建一个容器。您也可以围绕所有元素创建一个容器，但请记住，对于容器div存在的子元素，您不会有任何hover或单击效果。
所以在我的例子中，我只会使用一个你试图淡入的div。所以假设你有一个’放大’function，它在动画中被埋没了：
#zoomin { position:absolute; top:20px; right:20px; display:block; z-index:15; width:47px; height:48px; }
目前放大将消失。 因此解决方案是将其包装在容器中并将以下css应用于该容器：
#zoomincontainer { top:20px; right:20px; with:47px; height:48px; } div.keepontop { position:absolute; z-index:14; }
这将为您的div应用基础，并在动画期间将其保持在其他图层之上。
请注意，因为您的’zoomin’div绝对定位，您必须将宽度，高度和位置特征应用于容器’zoomincontainer’div。 否则你会发现你的容器在页面/框架的左上角有0px x 0px尺寸 – 它不会成为任何东西的基础，除非它覆盖你动画的div下方的整个区域。
我将PA和z-index放在’keepontop’类中，以防你有多个正在淡入淡出的div。
现在就像一个魅力。 我希望这有帮助！
只是另一个注意事项……我遇到了同样的问题并解决了它：
.keepontop{ position:absolute; z-index:999; }
这允许我有一个包含修复z-index问题的div，但也解决了埋藏DIV的click事件问题。
我有同样的问题，我尝试了所有这些解决方案，并没有解决我的问题……
我所做的就是解决它，在调用淡入淡出效果之前，我减少了前面元素的z-index，即使是“较低”的z-index ……也就是说，我用on complete函数调用淡入淡出，所以当我的淡入淡出效果结束，并且z-index问题自动解决时，我首先为我减少的元素设置了z-index。
...
在你的切换div上放一个div。 添加具有位置相对和正确z-index的样式。 （可能会发生，z-index 1对你来说不够大，然后尝试更高级别，等等100）
...
这样切换组件将隐藏在它应该的时候，但div将永远不会，它永远不会松开它的z-index。
Slidetoggle非常古怪……我遇到了类似的问题。 我让它在我的网站上工作的方式是将切换的div移动到我的html的最底层。 因为它在DOM中排在最后，所以z-index应该自动设置为高于前面的元素。 由于它绝对定位，你也不应该对布局有任何问题。