Dans la spécification CSS sont définies, en plus des styles, les instructions et la syntaxe destinées à spécifier la position précise des éléments HTML.
L'accès et la manipulation des positions des éléments dans le document HTML a permis le positionnement dynamique.
Le projet CSS-P (W3C), qui ajoute de nouvelles propriétés CSS, spécifie la syntaxe qui définit l'emplacement initial des éléments du document HTML. Dans ce projet, un modèle de programmation ne fut pas défini, ce qui explique qu'aujourd'hui, Netscape et Internet Explorer ne sont pas entièrement compatibles car le modèle objet pour le déplacement des éléments est différent !
Trois types de positionnement sont définis dans le CSS-P : statique,
absolu et relatif.
La mise en forme normale des documents HTML correspond au positionnement statique, qui est
appliqué par défaut.
Un élément en position en position absolue, est retiré du flux normal du document et est positionné par rapport au système de coordonnées de son élément parent (en général BODY) tandis qu'un élément en position relative reste dans le flux normal, et est positionné par rapport à sa position normale.
| Propriété | Valeurs possibles | Peut être appliqué à | Brève description |
| position | static (défaut) absolute relative |
Tous les éléments | Définit la position de l'élément par rapport au flux du document [normale (relative) ou extérieure (absolute)] |
| top,left | auto (défaut) <lenght> <percentage> |
Tous les éléments pour lesquels la position est relative ou absolute | Spécifie les positions vers le bas (top) ou vers la gauche (left) part rapport au système de coordonnée parent. |
| width, height | auto (défaut) <lenght> <percentage> |
Tous les éléments de type bloc, les éléments IMG et les contrôles intrinsèques, et tous les éléments de position absolute | Spécifie la largeur et la hauteur de l'élément (par rapport au système de coordonnée parent) |
| clip | auto (par défaut) top - right - bottom - left |
Tous les éléments de position absolute | Spécifie la région de découpage de l'élément |
| z-index | auto (par défaut) number |
tous les éléments de position relative ou absolute | Précise le chevauchement des éléments les uns par rapport aux autres (une image en dessous de texte par exemple) |
| visibility | inherit (par défaut) visible hidden |
Tous les éléments | Définit si un élément sera visible ou non (l'élément n'est pas retiré du flux du document) |
| overflow | visible (par défaut) hidden auto scroll |
Tous les éléments de position absolute et les éléments bloc. | Permet d'afficher les barres de défilement lorsque le contenu de l'élément est trop petit. |
Grâce à ces nouvelles propriétés, il est possible aujourd'hui de créer une mise en page avec une précision très importante, ce qui n'était pas possible auparavant...
Chaque élément est placé par rapport à un autre élément ou le document lui-même. En position relative (position:relative), c'est la position normale de l'élément qui définit l'axe de son système de coordonnées, tandis qu'en position absolue (position:absolute), c'est soit le coin supérieur gauche du document (système de coordonnées par défaut) soit un autre élément (DIV imbriqué par exemple).
Actuellement, si tous les éléments du corps du document acceptent le positionnement relatif (et statique bien sûr), le positionnement absolu n'est reconnu que pour les éléments suivants :
APPLET - BUTTON - DIV - SPAN - INPUT - OBJECT - SELECT - FIELDSET - IFRAME - IMG - TABLE - TEXTAREA
Pour appliquer une position absolue à un texte, vous devez l'insérer dans un élément DIV ou SPAN. Si vous devez faire précéder et suivre le texte d'un saut de ligne, choisissez l'élément DIV, tandis que pour une insertion dans un paragraphe part exemple, c'est l'élément SPAN qui convient.
Les propriétés top et left d'un élément, en position relative ou absolue, définissent sa position par rapport à la racine de son système de coordonnées : il est donc possible de déplacer un élément en faisant varier ces propriétés.
N'oubliez pas que si vous imbriquez des éléments DIV ou SPAN (en positionnement absolu), le premier élément devient la racine du système de coordonnées du second et donc, les valeurs de position du second se calculeront en fonction du premier élément.
Voici un exemple d'éléments DIV imbriqués, pour que vous visualisiez mieux cette caractéristique.Tous les éléments du document peuvent être masqués (y compris BODY), en modifiant leurs propriétés visibility (visibility:hidden). Remarquez qu'un élément masqué n'est pas retiré du flux du document (à l'inverse de display:none). Autrement dit; l'élément est toujours présent mais est rendu transparent. Si la propriété visibility est explicitement définie (par un style en ligne) pour un élément fils, celui-ci n'héritera plus de la propriété visibility de son élément parent et prend donc, la valeur nouvellement définie.
Il y a une petite différence entre Netscape et Internet Explorer (versions 4 et supérieures) ! En effet, si vous spécifiez par une feuille de style globale (ou liée) qu'un élément est en position (absolue ou relative) et de propriété visibility:hidden, même si vous spécifiez par un style en ligne que la propriété visibility est visible, Netscape ne l'affichera pas. Autrement dit, vous pouvez jouer sur cette différence et ainsi rendre visible certains éléments pour Internet Explorer et invisible pour Netscape (les boutons de chaînes d'Explorer par exemple). Ainsi, ci-dessous, un message approprié à votre navigateur doit apparaître et est différent si vous visionnez cette page avec Internet Explorer 5.x ou Netscape 4.x.
Cette nouvelle propriété est très intéressante car elle permet de spécifier le chevauchement des éléments les uns par rapport aux autres : c'est l'axe des Z qui définit l'ordre d'affichage.
Chaque système de coordonnées définit un nouvel espace de coordonnées, ce qui détermine ainsi une hiérarchie pour l'ordre d'affichage.
Les éléments qui définissent un système de coordonnées ont une valeur de z-index de 0 par défaut. Si vous désirez faire apparaître une image au-dessous d'un texte, il faut d'abord la positionner dans l'espace du texte (relatif ou absolu) et ensuite lui donner une valeur de z-index inférieure à 0 !
Vous pouvez aussi créer un premier élément DIV qui contient l'image et ensuite, un second élément (avec le texte) qui comprend un z-index supérieur au premier. Ci-dessous, vous pouvez vérifier une image située en dessous d'un texte exemple...
Chaque élément en position absolue (position:absolute) possède une zone de découpage c'est-à-dire que l'on peut définir la partie de l'élément qui sera qui sera visible ou non. Imaginez que vous placez sur certaines parties de l'élément du papier opaque, qui cache les parties de l'élément spécifiées par les valeurs top, right, bottom et left.
Les propriétés top, right, bottom et left déterminent le rectangle de découpage. Ces valeurs se calculent à partir du bord supérieur gauche de l'élément. Des valeurs négatives permettent le chevauchement des éléments proches de la zone de découpage.
Vous pouvez visionner un exemple de propriété clip, où en top (20) et en left (15) est placé un papier opaque qui cache une partie de l'élément en partant de la partie supérieure de celui-ci (20) et une autre partie cachée à partir du côté gauche : cliquez sur le bouton ci-dessous pour visionner cet exemple.
Si le contenu d'un élément est plus grand que les dimensions choisies pour l'élément (width,height), il est possible d'ajouter des barres de défilement (horizontales et verticales) qui permettent ainsi de visualiser la totalité du contenu.
Ces barres de défilement sont disponibles pour tous les éléments dont la position est absolue, les éléments DIV dont la hauteur est spécifiée (height) et ceux qui supportent la propriété CSS float.
Actuellement, seul Internet Explorer semble accepter cette propriété, c'est pourquoi, ceux qui visionnent cette application avec Netscape ne pourront voir l'exemple qui est proposé ci-dessous car l'élément IFRAME est employé ! [élément qui est reconnu par Internet Explorer (version 4 et supérieure) mais complètement ignoré par Netscape] ;-(