jQuery fadeIn on position:绝对导致z-index问题

Question

技术上我正在使用,fadeToggle()但他们是表兄弟......基本上我的问题是我有一个绝对定位的div我正在使用slideToggle()但是Z-index在动画完成之前没有被设置.结果是在淡入淡出期间,相邻div中的文本(其z-索引值低于一个淡入的z-index值)出现在"具有较高z-index的div中的淡入"之上.

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

编辑:请允许我澄清:当动画完成时,z-index正确解析,但在转换过程中,文本位于其上方.

Answer 1

我刚才有同样的问题,所以我想我会分享解决方案.至于你说jQuery不会的东西fadeIn(),fadeOut(),slideToggle()等当元素绝对定位的一个z-index,与它下面的元素也定位为绝对和给予z-index.

如果你删除底部元素,你会注意到你的动画运行正常.但是对于'子元素',只有当它完全消失时才会获得你的fadeIn.这是因为z-index只有在动画完成后才会确认.

解决方案是围绕您正在淡入的每个元素创建一个容器.您也可以围绕所有元素创建一个容器,但请记住,对于容器div存在的子元素,您不会有任何悬停或单击效果.

因此,在我的示例中,我将使用您尝试淡入的一个div.因此,假设您有一个"放大"功能,该功能在动画期间被掩埋:

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

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

目前放大将消失.因此解决方案是将其包装在容器中并将以下css应用于该容器:

<!-- 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;
}

这将为您的div应用基础,并在动画期间将其保持在其他图层之上.

请注意,因为您的'zoomin'div绝对定位,您必须将宽度,高度和位置特征应用于容器'zoomincontainer'div.否则你会发现你的容器在页面/框架的左上角有0px x 0px维度 - 它不会成为任何东西的基础,除非它覆盖你动画的div下面的整个区域.

我将PA和z-index放在'keepontop'类中,以防你有多个正在淡入淡出的div.

现在就像一个魅力.我希望这有帮助!