两个 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
内.
想法?
最佳答案
#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 在当前元素之外时隐藏它。”
关于javascript - 隐藏较低 z-index 的元素 "beneath"div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24173449/