我正在处理我的第一个视差页面,我在callmenick找到了一个简单的例子。
他将parallax.section
设置为600px高。这也是图像的容器。
<section class="module content">
<div class="container">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
</section>
<section class="module parallax parallax-2">
<div class="container">
<div class="test">Test container</div>
<h1>Rise</h1>
</div>
</section>
我在test
div中添加了container
div margin-top: 30px;
我预计它会在我的测试div和容器div之间创建一个30 px的边距。相反,它会在节div之间产生间隙。那是为什么?
如果我将overflow: hidden
添加到container
div,我就解决了这个问题。但我仍然不明白为什么保证金不能在其他div中工作。
使用的CSS是这样的:
section.module.parallax {
height: 600px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.module .test{
margin-top: 40px;
background-color: #BCEF2F;
}
答案 0 :(得分:7)
你看到了collapsing margins。要解决此问题,请将overflow:auto
添加到容器div:
.container {
max-width: 960px;
margin: 0 auto;
overflow:auto;
}
<强> jsFiddle example 强>