隱藏較低z-index的div之下的元素

Question

兩個小提琴。 首先，顯示我想要的一切： http : //jsfiddle.net/3SWwD

第二個，顯示我要在其中部署效果的網站上存在的問題： http : //jsfiddle.net/3SWwD/1/

這些小玩意兒描述了此代碼的所有工作，但出於徹底考慮：

我有兩個相互碰撞的容器div，其中第一個包含一個imagel，在本示例中，我將其簡化為<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的z索引比#never_cover_me ，因此顯然不是這種情況，而是將圖像繪制在了上面#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索引必須比#never_cover_me 。 從語義#image ，我希望#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

您不應該真正嘗試使用其他元素來隱藏您的內容。 更好的解決方案是設置overflow:hidden; 在#container因為您要獲得的效果是“當塊位於當前元素外部時隱藏此內容”。

Answer 2

就像將overflow:hidden到#container一樣簡單。

小提琴： http ： //jsfiddle.net/3SWwD/2/