CSS位置相对和元素高度

Question

我有一个元素在另一个下面,我使用position相对于向下拖动底部元素,以便它覆盖顶部元素.

paperOverlay元素是页面上的最后一个元素,纵向说,我希望它扩展到浏览器窗口的底部.但是,元素位置的相对轻推会在底部留下相等数量的空白.有什么方法可以避免这种情况吗？

HTML看起来像:

div class="container">
    <div class="homePage">
        <!-- some content -->
    </div>
    <div class="paperOverlay" style="position: relative; top: -70px;">
        <!-- some more content -->
    </div>
</div>

CSS看起来像:

div.container 
{ 
    width: 960px;
    margin: 0 auto;
}

div.homePage 
{ 
    width: 800px;
    height: 500px;
}

div.paperOverlay
{
    width: 960px;
    min-height: 400px;
    background: url('Images/Overlay.png') no-repeat top center;
}

基本上,底层是白色背景,顶部有撕裂的纸边缘效果.目标是使撕裂的纸边缘略微覆盖在其上方的元件的底部.我margin-top: -70px按照下面的建议尝试并修复了高度,但现在顶部元素中的元素位于叠加层的顶部,我希望叠加层位于顶部.

Answer 1

你能尝试一个负边际而不是相对定位吗？另外,您能解释一下为什么需要这样做并发布css以便我们更好地建议解决方案吗？