CSS相对定位和元素高度

Question

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

纸张覆盖元素是页面上最后一个元素，垂直而言，我希望它延伸到浏览器窗口的底部。然而，元素位置的相对微调会在底部留下相同数量的空白。有没有办法避免这种情况？

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，它固定了高度，但现在顶部元素中的元素位于覆盖层的顶部，而我想要覆盖层位于顶部。

- Chris

Answer 1

你可以尝试使用负边距代替相对定位。此外，你能否详细解释一下为什么需要这样做，并发布你的CSS代码，以便我们更好地提出解决方案？

- AndyL

---

负边距起作用了，除了底部元素现在被放置在顶部元素的下面。有什么想法吗？同时，请发布 CSS 代码。 - Chris

现在将您的元素设置为相对定位（实际上不做任何更改），并增加它的 z-index。.paperOverlay { z-index: 2; position: relative; } - AndyL

Answer 2

我尝试了下面建议的margin-top: -70px，它修复了高度问题，但现在顶部元素中的元素位于覆盖层上方，而我希望覆盖层位于其上方。

尝试这个：

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

div.homePage 
{ 
    height: 500px;
    position: relative;
    width: 800px;
    z-index: 1;
}

div.paperOverlay
{
    background: url('Images/Overlay.png') no-repeat top center;        
    min-height: 400px;
    position: relative;
    top: -70px;
    /* you can optionally use bottom: 70px; rather than top: -70px */
    width: 960px;
    z-index: 2;
}

在两个元素上都使用 position: relative; 并设置 z-index 应该可以使覆盖层在顶部元素的上方，而不是相反。

您还可以尝试在所有需要固定宽度/高度的元素（特别是 div 和其他容器，如锚点或列表项）上使用 display: block;，以防止折叠。它通常会调整非块级元素大小以适应其内容，并忽略其他情况下的宽度和高度规则。

- Clowerweb

Answer 3

尝试设置paperOverlay元素的高度。它应该是实际高度减去相对移动量。

- Keith S Messina

Answer 4

使用“vh”单位对我很有效。我无法使用height: calc(100%-50px)使其正常工作。

#main-nav{

    width: 55px;
    background-color: white;

    transition: 400ms;
    height: calc(100vh - 50px);
}

- Jay Jara