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

Answer 2

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

Answer 3

我确实尝试了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应该将叠加层放在顶部元素的顶部，而不是相反。

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

Answer 4

使用“ vh”单元对我有用。我无法使其与height: calc(100%-50px)

一起使用

#main-nav{

    width: 55px;
    background-color: white;

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

CSS位置相对和元素高度

4 个答案: