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位置相對和元素高度

回答

相關問題