javascript 位置上的 jQuery 淡入：绝对导致 z-index 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7055269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery fadeIn on position:absolute causes z-index issue
提问by Brian
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.
从技术上讲，我正在使用，fadeToggle()但它们是表兄弟……基本上我的问题是我有一个绝对定位的 div，我正在使用它slideToggle()，但在动画完成之前不会设置 Z-index。结果是在淡入淡出期间，相邻 div 中的文本（其 z-index 值低于淡入的那个）出现在具有较高 z-index 的淡入淡出的 div 之上。
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.
编辑：请允许我澄清：当动画完成时，z-index 正确解析，但在过渡期间，文本位于其顶部。
回答by Jonathan Tonge
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.
我只是遇到了同样的问题，所以我想我会分享解决方案。正如您所说，当元素绝对定位为 a 时，jQuery 会使用fadeIn(),等执行某些操作，其下方的元素也定位为绝对定位并给出 a 。fadeOut()slideToggle()z-indexz-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-indexis only acknowledged once the animation completes.
如果您删除底部元素，您会注意到您的动画运行良好。但是对于“子元素”，您只有在完全淡入时才会获得淡入淡出。那是因为z-index只有在动画完成后才会确认。
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.
解决方案是围绕您淡入的每个元素创建一个容器。您也可以围绕所有元素创建一个容器，但请记住，对于容器 div 所在的子元素，您不会有任何悬停或单击效果.
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。所以假设你有一个在动画过程中被隐藏的“放大”功能：
<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:
当前放大将消失。所以解决方案是将它包装在一个容器中，并将以下 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;
}
This will apply a foundation for your div and keep it on top of the other layers during the animation.
这将为您的 div 应用基础，并在动画期间将其保持在其他图层的顶部。
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.
请注意，因为您的 'zoomin' div 是绝对定位的，您必须将宽度、高度和位置特征应用到您的容器 'zoomincontainer' div。否则，您会发现您的容器 div 位于页面/框架的左上角，尺寸为 0px x 0px - 它不会成为任何东西的基础，除非它覆盖了您正在制作动画的 div 下方的整个区域。
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.
我将 PA 和 z-index 放在“keepontop”类中，以防您有多个淡入淡出的 div。
Works like a charm now. I hope this helps!
现在就像一个魅力。我希望这有帮助！
回答by Jeff
Just another note... I was having the same issue and solved it by:
另一个注意事项......我遇到了同样的问题并通过以下方式解决了它：
<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;
}
This allowed me to have one containg div that fixes the z-index issue, but also solved the click event issue for buried DIVs.
这让我有一个包含 div 来修复 z-index 问题，但也解决了埋藏 DIV 的点击事件问题。
回答by Diego Riccio TrunX
I have the same issue, and I'd tried all this solutions and it didn't solve my problem...
我有同样的问题，我已经尝试了所有这些解决方案，但它没有解决我的问题......
What I did to solve it, was before calling the fade effect, I decreased the z-index for the element that was in front even with "lower" z-index... Than, I call the fade with the on complete function, so when my fade effect ends, and the z-index issue is automatically solved, I set back the z-index for the element I'd decreased at first.
我为解决这个问题所做的是，在调用淡入淡出效果之前，即使使用“较低”的 z-index，我也降低了前面元素的 z-index ……然后，我使用 on complete 函数调用了淡入淡出，因此，当我的淡入淡出效果结束并且 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; }
回答by codecraftnap
Slidetoggle is really quirky... I've had a similar issue. The way I got it to work on my website was to just move the toggled div to the very bottom of my html. Because it comes last in the DOM, the z-index should be automatically set higher than the previous elements. Since it's absolutely positioned, you shouldn't have any issues with layout, either.
Slidetoggle 真的很奇怪……我也遇到过类似的问题。我让它在我的网站上工作的方式是将切换的 div 移动到我的 html 的最底部。因为它在 DOM 中排在最后，所以 z-index 应该自动设置为高于之前的元素。由于它是绝对定位的，因此您也不应该有任何布局问题。
回答by BlondCode
Put a div around your toggling div. Add style with position relative and correct z-index. (It can happen, that z-index 1 is not enough big for you, then try with higher level, etc. 100)
在您的切换 div 周围放置一个 div。添加具有相对位置和正确 z-index 的样式。（这可能发生，z-index 1 对你来说不够大，然后尝试更高的级别，等等。100）
<div style="position: relative; z-index: 1;>
<div id="component-to-toggle">
...
</div>
</div>
This way the toggling component will hide when it supposed to but the div around will never and it will never loose it's z-index.
这样，切换组件会在它应该隐藏时隐藏，但周围的 div 永远不会，也永远不会丢失它的 z-index。
