Accueil    CSS    Propriété Bottom
 



style css bottom  Style CSS bottom

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété bottom permet d'appliquer une modification du positionnement vertical à l'élément qu'elle décrit. Ce décalage vertical se base sur la position de la limite basse de l'élément et se calcule en fonction de la valeur spécifiée.
Il est cependant nécéssaire d'appliquer un positionnement relatif ou absolu à l'élément pour que la propriété soit bien appliquée.

Bien qu'il soit possible de définir le positionnement d'un élément avec les propriétés top, bottom, left et right, il est fréquent de ne définir que le coin haut gauche de l'élément tout en gérant son type de positionnement (absolu ou relatif) et son mode d'affichage (inline ou block).

D'autres paramètres peuvent entrer en ligne de compte pour affiner le positionnement du contenu : le contour (outline), la marge (margin) ou l'espacement (padding) en font partis.



Propriétés pour le style bottom :




Propriété Définition Valeurs CSS
bottom Modifie la disposition verticale de l'élément par rapport à sa limite basse auto
valeur
%
inherit
CSS 1


Exemple d'utilisation du style css bottom :





Utilsation de la propiété bottom avec les valeurs auto, 20px et -20px :

<div style="height:100px; width:500px; border:solid 1px black;">
exemple
<span style="position:relative; bottom:auto; padding:10px; border:dashed 1px green;">Bloc en position relative avec bottom : auto</span>
exemple
</div>

<div style="height:100px; width:500px; border:solid 1px black;">
exemple
<span style="position:relative; bottom:20px; padding:10px; border:dashed 1px green;">Bloc en position relative avec bottom : 20px</span>
exemple
</div>

<div style="height:100px; width:500px; border:solid 1px black;">
exemple
<span style="position:relative; bottom:-20px; padding:10px; border:dashed 1px green;">Bloc en position relative avec bottom : -20px</span>
exemple
</div>


Utilsation de la propiété bottom avec les valeurs auto, 20px et -20px :

exemple

Bloc en position relative avec bottom : auto

exemple

exemple

Bloc en position relative avec bottom : 20px

exemple

exemple

Bloc en position relative avec bottom : -20px

exemple