jQuery fadeIn on position:absolute 导致 z-index 问题答案

【问题标题】：jQuery fadeIn on position:absolute causes z-index issuejQuery fadeIn on position:absolute 导致 z-index 问题
【发布时间】：2016-12-28 22:38:44
【问题描述】：

从技术上讲，我使用的是fadeToggle()，但它们是堂兄弟...基本上我的问题是我有一个绝对定位的 div，我使用的是slideToggle()，但 Z-index 直到动画才设置完成。结果是，在淡入淡出期间，相邻 div 中的文本（其 z-index 值低于淡入的那个）出现在具有较高 z-index 的淡入淡出的 div 的“顶部”。

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

编辑：请允许我澄清一下：当动画完成时，z-index 会正确解析，但在过渡期间，文本位于其顶部。

【问题讨论】：

为什么 jQuery 事件会设置 z-index？为什么不能只用 CSS 独立于动画来提高元素的 z-index？
你试过在动画之前设置z-index吗？
z-index 是在 CSS 中静态设置的。请允许我澄清一下：当动画完成时，z-index 会正确解析，但在过渡期间，文本位于其顶部。
@Brian 尝试将 z-index 设置得非常高，然后看看它在动画期间是否仍然如此。暂时仅用于测试目的。您可以随时尝试 ('div').css('z-index', 999).slideToggle();然后在动画回调中放回 z-index。我不知道为什么它会改变 z-index。
你能把代码连同相关的css/html一起发布吗？或者创建一个显示相同的简化结构的小提琴？

标签： javascript jquery debugging

【解决方案1】：

我刚遇到同样的问题，所以我想我会分享解决方案。正如你所说，当元素使用z-index 绝对定位时，jQuery 对fadeIn()、fadeOut()、slideToggle() 等进行了处理，其下方的元素也定位为绝对位置并给出z-index。

如果您删除底部元素，您会注意到您的动画运行良好。但是对于“子元素”，您只有在完全淡入时才能获得淡入。这是因为 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。否则，您会在页面/框架的左上角找到您的容器 div，尺寸为 0px x 0px - 除非它覆盖您正在制作动画的 div 下方的整个区域，否则它不会成为任何东西的基础。

我将 PA 和 z-index 放在 'keepontop' 类中，以防您有许多淡入淡出的 div。

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

【讨论】：

花时间帮助社区使用这个改进的解决方案做得很好。您认为这是正确的，并且比以前接受的答案更有帮助。我已经投票并将其更改为正确答案。

【解决方案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;
}

这让我有一个包含 div 来修复 z-index 问题，但也解决了隐藏 DIV 的点击事件问题。

【讨论】：

【解决方案3】：

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

我解决这个问题的方法是，在调用淡入淡出效果之前，即使使用“较低”的 z-index，我也减少了前面元素的 z-index...然后，我用 on 调用淡入淡出完整的功能，所以当我的淡入淡出效果结束并且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; }

【讨论】：

【解决方案4】：

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

【讨论】：

赢家！就是这样，现在只需要弄清楚如何修改此代码，以便将该元素放在底部是友好的：/
您知道是否还有其他解决方法吗？我去看看重新构建我的 HTML，在这里发布需要太长时间，但事实证明不可能将 fadeToggle()'d 元素放在底部，尽管这样做确实解决了问题 - 但又做了另一个页面的一部分无法访问。
嗯，不确定...您只需要将它放在干扰的 div 之后，而不是一直放在底部。但如果这不起作用，您是否尝试将其放置在具有高 z-index 的非消失 div 中？这可能适用于所有浏览器（IE 除外）。

【解决方案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。

【讨论】：