Cours CSS : le positionnement

Généralités

Grâce au CSS, il est désormais possible de positionner, au pixel près, du texte ou une image avec les feuilles de style.
Le positionnement des éléments par les feuilles de style est repris sous la spécification CSS-P représentant le positionnement dynamique.
Le positionnement dynamique n'est rien d'autre en fait qu'une série de nouveaux attributs de styles, spécialisés dans la gestion de la position et de la superposition du texte. Ce n'est pas grand chose mais cela fait tout.
Notons que ce positionnement n'est possible que sous les versions 4 de Netscape et d'Explorer. Et que cette technique est encore un peu hasardeuse à ce jour, surtout sur le plan de la compatibilité avec les deux browsers susnommés. De plus, si Explorer accepte des attributs CSS-P sur à peu près toutes les balises, Netscape est plus capricieux et pourra générer des erreurs.
Les attributs CSS-P se rajoutent dans les attributs des feuilles de styles classiques. Mais toutes les balises HTML ne peuvent recevoir les attributs CSS-P. De manière générale, seules les balises de bloc (DIV) peuvent utiliser CSS-P.

Position absolue ou relative ?

Position spécifie le type de positionnement du document. Il en existe 3 types, static (le type par défaut), absolue, ou relative.

Position absolue

La position absolue {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du browser.
Les coordonnées de ce point sont top = 0 et left = 0.

Il y a 3 options pour top et left :

auto (par défaut),
pixels (vous précisez la valeur suivie de px),
pourcentage (la même chose suivie de %).

Les coordonnées d'un point de haut en bas pour top et de gauche à droite pour left.

Pour appliquer une position absolue à un texte vous pouvez utiliser les balises SPAN ou DIV. La balise DIV est préférable pour les grands textes qu'elle fera précéder et suivre d'un saut de ligne; la balise SPAN, conçue comme simple marqueur, sera utilisée pour encadrer un paragraphe.

Position relative

La position relative {position: relative} se détermine par rapport à d'autres éléments de la page, par exemple un élément du code Html.
Un positionnement relatif sera donc traité dans le flux du document (qui est traité de bas en haut), et fera référence pour son positionnement à l'élément qui lui est immédiatement supérieur. Cette propriété est valable pour tous les types de balises.

Exemple d'application :

Soit l'image 1.jpg :

.toto {
position:absolute; top:10px; left:10px;
}
<BODY BGCOLOR="#000080" TEXT="#FF0000">
<IMG SRC="1.jpg" BORDER=0 WIDTH=50 HEIGHT=50>
<B><DIV CLASS="toto">Toto et titi</DIV></B>

Donne en position absolue :

et en position relative avec "Toto et Tata":

Attributs

Clip

Il s'applique uniquement aux éléments de position absolue. Il va spécifier la zone de visibilité du document, c'est à dire l'endroit où le document contenu dans les balises pourra ne plus être visible s'il dépasse les paramètres de largeurs et de hauteurs fixés par clip.
La syntaxe de clip varie selon les navigateurs, mais les recommandations du W3C sont du type:

clip:rect(haut,droite,bas,gauche)

Exemple : prenons l'image 1.jpg avec CLIP

Donne :

Remarquez que les ¾ de l'image ont disparu !

Visibility :

Visibility, précise la visibilité ou non du document. Elle possède deux options qui n'ont pas la même syntaxe sous Explorer et sous Netscape.

Visible pour Explorer, show pour Netscape;
Hidden pour Explorer, hide pour Netscape.

L'option par défaut est bien entendu visible.

Z-index

Z-index, c'est l'attribut qui va définir l'empilement des feuilles de styles. Il indique l'axe vertical d'empilement, ou la priorité d'affichage entre éléments superposés. Il s'applique à tous les éléments de position relative ou absolue. Plus l'index est grand, plus l'élément est situé dessus. Plus il est bas, plus il est situé dessous.
Deux éléments de même index vont se superposer. C'est très pratique pour afficher du texte sur une image, ou vice-versa.

Exemple avec les deux images 1.jpg et 2.jpg :

donne :

Si l'on place le z-index:2 sur la classe Toto :

Nous vous informons que ce cours constitue une œuvre protégée en France par le Code de la Propriété Intellectuelle, et à l’étranger par les conventions internationales en vigueur sur le droit d’auteur. La violation de l’un des droits d’auteur de l’œuvre est un délit de contrefaçon. Il est donc interdit, à titre privé ou public, de reproduire, copier, vendre, revendre ou exploiter, que ce soit dans un but commercial ou purement gratuit, ce cours, sauf accord exprès et préalable de son auteur.

Cours CSS N°5 : le positionnement