Positionnement des feuilles de style

Les feuilles de style peuvent être positionnées selon votre volonté à l'intérieur de vos pages Internet. Les positions sont relatives ou absolues et sont précisées par la propriété " position ".

La position relative est définie par rapport à la position de l'élément qui le précède.

La position absolue est définie selon la fenêtre de la page Internet.

< SPAN style="position : relative; top : 70px; left: 50px;">
Le texte est à 70 pixel sous la ligne précédente et à 50 pixels à droite de ligne précédente
</SPAN>

Testez l'exemple

ou



< SPAN style="position : relative; top : 0px; left: 0px;" >
Le texte suit la ligne précédente</SPAN>

Testez l'exemple

< SPAN style="position : absolute; top : 70px; left: 50px;">
Le texte est à 70 pixel sous le titre et à 50 pixels à droite de la marge gauche
</SPAN>

Testez l'exemple

ou



<SPAN style="position : absolute; top : 0px; left: 0px;">
Le texte se trouve au coin supérieur gauche de la fenêtre
</SPAN>

Testez l'exemple

Voici les quatres exemples ensembles

Syntaxe de la définition de position d'un élément

<Balise style style="position : valeur; top : valeur; left: valeur">

• Position indique si la position est relative ou absolue;
  
• Top donne la distance verticale;
  
• Left donne la distance horizontale.
  

 Les éléments DIV et SPAN    Les évènements