Posicionamiento div flotante

Question

Necesito un rectángulo flotante (ancho del 100%, altura de 100 px) para que aparezca exactamente a 20 píxeles por encima de la parte inferior de la página. ¿Cómo puedo hacer eso?

El código siguiente muestra el rectángulo en la parte inferior de la ventana del navegador, no la página, por lo que si la página es más alta de lo que cabe en la pantalla, el rectángulo aparece en algún lugar en el medio de la página.

<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

Agregue position: relative; al padre de div del rectángulo. Esto posicionará el div 20px desde la parte inferior del elemento padre.

Answer 2

Live Demo

• Como sugiere @ Laxman13, es necesario agregar position: relative al padre del "rectángulo flotante". El padre relevante en este caso simplemente es el elemento body.
• Read this/this/this para ayudar a comprender la propiedad 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; 
}