Question

从技术上讲，我正在使用fadeToggle()，但他们是表兄弟...基本上我的问题是我有一个绝对定位的div我正在使用slideToggle()但是Z-index不是设置直到动画完成。结果是在淡入淡出期间，相邻div中的文本（其z-index值低于一个淡入的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。

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

Answer 2

另一个注意事项......我遇到了同样的问题并通过以下方式解决了这个问题：

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

这允许我有一个包含修复z-index问题的div，但也解决了埋藏DIV的click事件问题。

Answer 3

我有同样的问题，我尝试了所有这些解决方案并没有解决我的问题......

我做了什么来解决它，是在调用淡入淡出效果之前，我减少了前面元素的z-index，即使是“较低”的z-index ......也就是说，我称之为淡入淡出完成函数，所以当我的淡入淡出效果结束，并且z-index问题自动解决时，我首先为我减少的元素设置了z-index。

<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 4

Slidetoggle非常古怪......我遇到了类似的问题。我让它在我的网站上工作的方式是将切换的div移动到我的html的最底层。因为它在DOM中排在最后，所以z-index应该自动设置为高于前面的元素。由于它绝对定位，你也不应该对布局有任何问题。

Answer 5

在你的切换div上放一个div。添加具有位置相对和正确z-index的样式。（可能会发生这样的情况，z-index 1对你来说不够大，然后尝试更高级别等等.100）

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

这样，切换组件会在它应该隐藏的时候隐藏，但是div永远不会，它永远不会松开它的z-index。

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

5 个答案: