父元素高度为0，子元素高度不为0的问题

html:
<div class="layui-container" style="overflow: hidden;">
<div class="info-title">
<h1>内容</h1>
</div>
</div>
css:
.layui-container{
position:relative;
margin:0 auto;
padding:0 15px;
box-sizing:border-box
}
@sɴᴏᴡ screen and (min-width:768px)
.layui-container{width:750px}
.info-title {
background: url(pic/login.jpg);
background-position: center center;
margin: 0px;
padding: 0px;
position: absolute;
width: 100%;
height: 200px;
}
以上是代码，按网上学的没用，去掉overflow: hidden;后子元素不在父元素内了
如图：加上overflow: hidden;


去掉overflow: hidden;
请高手解释一下这是怎么回事，以及解决方法，谢谢了