CSS位置相对和元素高度

Question

我有一个元素在另一个元素下面，我使用相对位置将底部元素向上拖动一点，以便它覆盖顶部元素。

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，以便我们可以更好地建议解决方案？