如何在某个坐标处隐藏另一个html标签

Question

我有两个div元素，在一个背景中div我有另一个div，它使用CSS动画来显示一个上下的框。

我想用盒子制作这个div的那些部分＆＃39;消失＆＃39;只要那个盒子的任何部分越过那个背景div。

我在这里有一个例子JSFidle，红色框一旦超过黑匣子，就应该在“3”下面。黑色div而不是像现在一样保持在顶部。

这是CSS代码：

body{
z-index:100;
}
div{
background: black;
height:300px;
}

#scroll{
width: 200px;
height: 200px;
background: red;
position: relative;
-webkit-animation-name: test;
-webkit-animation-duration: 60s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
animation-name: test;
animation-duration: 30s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

}

@-webkit-keyframes test {
0%   {left:0px; top:0px;}
50%  {left:0px; top:270px;}
100% {left:0px; top:0px;}
}

@keyframes test {
0%   {left:0px; top:0px;}
50%  {left:0px; top:270px;}
100% {left:0px; top:0px;}
}

body {
overflow-x: auto;
overflow-y: hidden;
}    

创建此效果的最佳方法是什么。

Answer 1

您只需要将overflow: hidden添加到父div。

为了测试目的，我加快了你的动画。

Like so

#scrollParent{
    overflow: hidden;
}

Answer 2

将z-index分配给最外面的背景（小提琴中的白色部分），并使其高于红色框的z-index。猜猜应该有用。