Question

关于css中背景图跟着div移动的问题

<div class="index-banna"> <div class="center-container"> <img src="image/banna-text.png" /> <h5><span class="lsep"></span>resto restaurant home page website template<span class="rsep"></span></h5> </div> </div>css部分.index-banna{ width: 100%; height: 570px; background: url('../image/banna.jpg') no-repeat; }.center-container{ text-align: center; margin-top: 212px;} 我的问题是当.center-container{margin-top212px;}的时候为什么背景图也跟着移动了212px！当我给index-banna，center-container设置一个边框的时候背景图就不会跟着移动了。另外.index-banna｛ width: 100%; height: 570px; background: url('../image/banna.jpg') no-repeat; background-size: cover; overflow: hidden; }当添加一个overflow：hidden；的时候背景图也不会跟着移动！所以到底是什么原因？加个边框加个overflow：hidden；背景图就不会跟着移动？
要的是这种效果





Answer 1

问题原因：
这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
通俗点说：
父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素，祖先元素进行垂直外边距合并。只要给父元素（或祖先元素）设置个有效的 border或者padding就可以有效的管制子元素的margin防止它越级。
解决方法：
给父元素加个padding或border或overflow:hidden