浮動div定位

Question

我需要一個浮動的矩形（100％寬度，100px高度）顯示在頁面底部上方的20px。我怎樣才能做到這一點？

下面的代碼顯示了瀏覽器窗口底部的矩形而不是頁面 - 因此，如果頁面高於屏幕所能容納的高度，矩形將出現在頁面中間的某處。

<div style="z-index: 1; position: absolute; right: 0px; bottom: 20px; background-color: #000000; width: 100%; height: 100px; padding: 0px; color: white; ">&nbsp;</div> 

Answer 1

將position: relative;添加到矩形div的父項。這將從父元素的底部定位div 20px。

Answer 2

Live Demo

• 作爲建議由@ Laxman13，你需要添加position: relative到 「浮動矩形」 的母公司。這種情況下的相關父母恰好是body元素。
• Read this/this/this幫助理解position財產。

HTML：

<div id="floatingRectangle">Hi.</div> 

CSS：

body { 
    position: relative 
} 
#floatingRectangle { 
    z-index: 1; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 20px; 

    height: 100px; 

    background-color: #000; 
    color: white; 

    padding: 0; 
}