javascript - 隐藏较低 z-index 的元素 "beneath"div

Question

两个 fiddle 。第一个，显示一切如我所愿:http://jsfiddle.net/3SWwD

第二个，显示存在于我尝试部署效果的网站上的问题:http://jsfiddle.net/3SWwD/1/

这些 fiddle 描述了这段代码所做的一切，但为了完整起见:

我有两个容器 div 相互碰撞，第一个包含一个图像，我已将其简化为 <div id="image">对于这个例子。

<div id="container">
    <div id="image"></div>
</div>
<div id="never_cover_me">
</div>

它们的样式如下，这些样式会出现问题，我会在展示js时解释。

#container{
    height: 400px;
    width: 400px;
    background: blue;
    position: relative;
    z-index: 200;
}

#image{
    height: 200px;
    width: 200px;
    background: red;
    position: relative;
    top: 200px;
    left: 100px;
    z-index: 50;
}

#never_cover_me {
    position: relative;
    height: 400px;
    width: 400px;
    background: yellow;
    z-index: 100;
}

最后，一些 Jquery/JS 将图像向下移动，从而进入 #never_cover_me 的空间。 .如果世界上一切都好，#image将被 #never_cover_me 涵盖虽然它被向下移动，但自 #container具有比 #never_cover_me 更高的 z-index ，显然情况并非如此，而是将图像绘制在 #never_cover_me 上.

$(document).ready(function(){
    setInterval(
         function(){
            $('#image').animate({top: '+=200px'}, "slow", function(){
                $('#image').delay(1000).animate({top: '-=200px'}, "slow")
            });
         },3000
    );
});

由于种种原因，#container必须具有比 #never_cover_me 更高的 z-index .从语义上讲，我更喜欢 #image留在 #container 内.

想法？

Answer 1

#container:

z-index: 200;

在#never_cover_me之上:

z-index: 100;

因此，它导致了您遇到的问题。以下是有关堆叠顺序以及后代如何受到影响的更多信息。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_and_float

您真的不应该尝试使用其他元素来隐藏您的内容。更好的解决方案是在 #container 上设置 overflow:hidden; 因为你想要的效果是“当 block 在当前元素之外时隐藏它。”