CSS溢出：隐藏在我的页面隐藏完整的子内容

Question

我想在div框中显示一些CSS3动画。所以我需要将overflow:hidden应用于不需要的溢出。

如果在小提琴上进行测试，其效果很好。但是，如果我在页面中的父div处应用overflow:hidden，则不再显示子内容。

请查看我的fiddle并帮助我。

My Css:

.movcontainer{
position: absolute;
top:200px; 
width:100%;
height:89%;
overflow:hidden;
z-index:55;
display: block;
border: 2px solid blue;
}
.contentbody{
position:fixed; 
top:0px; 
width:100%; 
height:100%;
border: 2px solid green;
}
.parent{
position: absolute;
top:10%;
left:10%;
width:80%;
height:80%;
border: 2px solid red;
text-align:center;
display: inline-block;
clear: both;
overflow:hidden;
}
.child {
background-image:url('http://fallmeeting.agu.org/2012/files/2012/09/Dust-and-Aerosols-SWIRL-graphic.jpg');
border: 2px solid green;
width:600px;
height:600px;
background-position: center center;
background-repeat: no-repeat;
margin:auto;
transform-origin: center;
}

更新

这里我还有两个div，可以创建少量定位。一个.movcontainer和其他.contentbody。这里.contentbody有固定的位置和问题。但是这两个div对我来说是必不可少的。

这是我的update fiddle

Answer 1

通过.parent div上的position:absolute替换position:fixed来解决此问题。