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因为#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必须具有比#image更高的z-index。在语义上，我希望#container保持在{{1}}。

想法？

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，因为您要使用的效果是＆＃34;当块在当前元素之外时隐藏它。＆＃34;

Answer 2

就像向overflow:hidden添加#container一样简单。

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

隐藏较低z-index的“下方”div元素

2 个答案: