隐藏元素" below "低z指数的Div

两个小提琴。第一个，显示我想要的一切:http://jsfiddle.net/3SWwD

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

这些参数描述了这段代码所做的一切，但为了完整:

我有两个容器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指数，显然情况并非如此，因此图像被绘制在#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中。

想法?