重疊絕對定位的內容

我在this page有點困難。它幾乎可以正常工作。重疊絕對定位的內容

紅色框應居中（h & v）在窗口上。作品。

黃色的盒子應該貼在窗口的底部。作品。

當窗口小於400像素高時，滾動條應該出現，黃色框應該出現在滾動區域的底部。基本上我從來不想讓黃框出現在紅框上，反之亦然。不工作

任何人都知道我可以做到這一點？

謝謝。

來源

2009-08-17 Louis W

這給CSS添加#wrapper：

height: 100%; 
position: relative;

這部作品的原因是因爲你絕對定位的元素由於沒有任何其他containing block而相對於視口定位。通過將position: relative添加到#wrapper（或針對該問題的body），請確保包含的塊代替整個主體內容。

然後只需要height: 100%以確保包含塊至少到達視口的底部。

來源

2009-08-17 23:06:17 mercator

賓果，這個按預期工作。謝謝。在IE6中不起作用，但我認爲這不是一個大問題，如果可以的話，我可以添加最小高度的黑客。 – 2009-08-17 23:09:40

而實際上，你是否需要其他包裝？因爲給定所有當前的CSS，'＃wrapper'是不必要的。你可以將它的所有屬性（包括上面的）移動到'body'。 – mercator 2009-08-17 23:13:35

#footer{z-index: 1000;} 
#logo{z-index: 1001;}

來源

2009-08-17 22:42:04

永遠不要他們佔用相同的空間。如果視口小於可用區域，則頁腳應低於徽標。 – 2009-08-17 22:48:27

z-index是你所需要的。雖然1000是有點過分簡單

#footer{ z-index:2; } 
#logo{ z-index:3; }

會做的伎倆

來源

2009-08-17 22:48:05 corymathews

要記住，這是非常有用的，不指定z-index，元素堆疊在z順序的最新元素「最高」。所以，如果你想避免指定z-index，扭轉HTML：

<body> 


    <div id="wrapper"> 

     <div id="footer"> 

      This is the footer. It should always appear at the bottom of the page, but not over the red box.    

     </div> 

     <div id="logo"> 
      <h1>Logo</h1> 
     </div> 

    </div> 

</body>

否則，對方的回答表明，指定爲#logo比爲#footer更大的數量將導致#logo更高。

要強制滾動條時，視口窗口< 400像素，

#wrapper { 
min-width: 400px; 
min-height: 400px; 
overflow: scroll; /* or overflow: auto */ 
}

來源

2009-08-17 23:01:52

如前所述，更改z-index只會使標誌顯示在頁腳上方。我不希望它們重疊。如果視口被調整大小以縮短高度，那麼兩個項目組合起來應該顯示滾動條並將頁腳堆疊在徽標下方。 – 2009-08-17 23:06:14

溢出：滾動將始終顯示滾動條，而自動將檢測滾動條是否必要（正如您可能知道的），但只是澄清。 – Tres 2009-08-17 23:07:51

Z-Index在這裏不是一個因素。 Z-Index仍然允許元素重疊 - 它只會指示哪個元素位於頂部。

使用浮子荷蘭國際集團元件在憑證流紅色DIV後，然後上的黃色用的清楚創建的元素之間的關係（即，黃色DIV將清楚紅色和不會重疊）。

夾緊相對尺寸的元件（例如，height：100％）將會將黃色div推到屏幕的底部，但是要正確垂直對齊可能會很棘手。

來源

2009-08-17 23:08:25 jscharf

重疊絕對定位的內容

回答

相關問題