[英]How to hide div under another during CSS3 animation
The CSS code : CSS代码:
.mainDiv{
width: 600px;
height: 600px;
background-color: blue;
}
.innerDiv{
width: 400px;
margin: auto;
height: 400px;
background-color: green;
}
.innerDiv div{
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
}
.removing{
-webkit-animation: slideout 1s;
animation: slideout 1s;
}
@-webkit-keyframes slideout {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
@keyframes slideout {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
Here is a jsFiddle of the problem. 这是问题的jsFiddle 。
What i would like it to do is this : 我想要它做的是:
When the first red block moves outside of the green block, i would like it to be behind the blue block instead of in front of it. 当第一个红色块移到绿色块之外时,我希望它位于蓝色块后面而不是前面。
add the line: overflow:hidden;
添加以下行:
overflow:hidden;
to your .innerDiv css rule 到您的.innerDiv CSS规则
Use z-index
. 使用
z-index
。
Example: 例:
#somethingBehind {
z-index: 1;
}
#somethingAtTheFront {
z-index: 2;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.