Positionner des éléments grâce aux CSS

Août 2015
Il est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises <SPAN> et <DIV>.
Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse et montre encore quelques problèmes de compatibilité.

Positionnement relatif et absolu

Le positionnement absolu {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).

La position relative se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent.

Positionner du texte

Positionnons le texte "Comment ça marche?" à 80 pixels du haut de la fenêtre et à 100 pixels à gauche de la fenêtre :

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;">

Comment ça marche? </SPAN> </BODY> </HTML>

Il y a d'autres façons de procéder, en voici une :

<HTML>
<HEAD>
<STYLE>
<!--
.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>
Comment ça marche?
</DIV>
</BODY>
</HTML>

Positionner une image

Positionnons l'image "test.jpg" à 80 pixels du haut de la fenêtre et à 100 pixels à gauche de la fenêtre (l'image fait 103x61) :

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
</BODY>
</HTML>

Il est important de spécifier la taille de l'image avec les feuilles de style, pour des raisons de non-compatibilité des navigateurs.

Superposer des éléments

Superposons le texte "Comment ça marche?" à l'image "test.jpg":

<HTML>
<BODY>
<SPAN style="position: absolute; top: 30 px; left: 100px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
<SPAN style="position: absolute; top: 50 px; left: 100 px;">
Comment ça marche?
</SPAN>
</BODY>
</HTML>

Il est ainsi possible de superposer des éléments de texte, ainsi que des images.

Pour une lecture illimitée hors ligne, vous avez la possibilité de télécharger gratuitement cet article au format PDF :
Positionner-des-elements-grace-aux-css .pdf

Réalisé sous la direction de , fondateur de CommentCaMarche.net.


A voir également


Positioning elements in CSS
Positioning elements in CSS
Posicionamiento de los elementos en CSS
Posicionamiento de los elementos en CSS
Mit CSS Elemente positionieren
Mit CSS Elemente positionieren
Posizionare degli elementi con CSS
Posizionare degli elementi con CSS
Posicionar elementos graças ao CSS
Posicionar elementos graças ao CSS
Ce document intitulé «  Positionner des éléments grâce aux CSS  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.