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