CSS位置相对和元素高度

我有一个元素在另一个下面，我使用的位置相对于拖动底部元素只是一点点，以便它覆盖顶部元素。CSS位置相对和元素高度

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，它固定了高度，但是现在顶部元素中的元素位于覆盖层之上，我希望覆盖层位于顶部。

来源

2011-06-17 Chris

你可以尝试一个负余量，而不是相对定位？另外，你能否解释一下为什么你需要这样做并发布你的CSS，以便我们能够更好地提出解决方案？

来源

2011-06-17 20:06:19 AndyL

负边距工作原理除了底部元素现在分层放置在顶部元素下方之外。有什么想法吗？此外，现在发布CSS。 – Chris

现在将您的元素设置为相对位置（而不实际更改它）并增加其z-索引。 .paperOverlay z-index：2; 位置：相对; } – AndyL

奇幻奇妙。这就是诀窍！ – Chris

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

来源

2011-06-17 20:08:05

我确实尝试了margin-top：-70px，如下所示，它固定了高度，但现在top元素中的元素位于覆盖层之上，我希望覆盖层位于顶层。

尝试这种情况：

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; 
}

使用位置：相对;在这两个元素上设置z-index应该在top元素顶部获得叠加层，而不是其他方式。

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

来源

2011-06-18 02:10:08 Clowerweb

CSS位置相对和元素高度

回答

相关问题