Accueil    CSS    Propriété top
 



style css top  Style CSS top

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


La propriété top 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 haute 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 top :




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


Exemple d'utilisation du style css top :





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

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

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

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


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

exemple

Bloc en position relative avec top : auto

exemple


exemple

Bloc en position relative avec top : 20px

exemple


exemple

Bloc en position relative avec top : -20px

exemple