Positionnement div flottant

Question

J'ai besoin d'un rectangle flottant (100% de largeur, 100px de hauteur) pour apparaître exactement 20px au-dessus du bas d'une page. Comment puis je faire ça? Le code ci-dessous montre le rectangle en bas de la fenêtre du navigateur et non la page - donc si la page est plus grande que ce qui peut tenir dans l'écran, le rectangle apparaît quelque part au milieu de la page.

<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

Ajoutez position: relative; au parent du rectangle div. Cela positionnera le div 20px du bas de l'élément parent.

Answer 2

Live Demo

• Comme suggéré par @ Laxman13, vous devez ajouter position: relative au parent du "rectangle flottant". Le parent pertinent dans ce cas se trouve être l'élément body.
• Read this/this/this pour aider à comprendre la propriété 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; 
}