Le mode de positionnement "absolute" :
A employer exclusivement pour des éléments dont la position ne variera pas, quelque soit le contenu de la page.
Exemples :
positionner un site web au centre d’une page
positionner un formulaire de recherche ou de login, un menu haut, un logo en haut d’une page
A ne pas employer pour positionner un élément de type bloc après un contenu variable, ou dont on ne maîtrise pas la hauteur.
Pourquoi ? Car le positionnement en absolu se fait, non pas par rapport à l’élément précédent dans la page, mais par rapport au dernier élément positionné dans l’arbre DOM.
Exemples où ne pas utiliser le positionnement absolu :
la borne FinHarmony
un bandeau bas (puisque, par définition, la page a une hauteur variable)
Le mode de positionnement "float" :
Le comportement float est comparable à des cubes de différentes largeurs qui viendraient se ranger méthodiquement au fond d’une boite (le fond de la boite étant le haut du site...). Le comportement des blocs positionnés en float est assez comparable au positionnement des blocs dans un jeu de tétris à l’envers... Dès qu’il n’y a plus assez de place au fond pour ranger un cube, ce cube se pose sur la rangée supérieure [1](même s’il y a des trous plus petits au fond...).
A utiliser pour les éléments multiples (2 mais surtout plus [2] de 2...) qui doivent "s’empiler" horizontalement [3].
Exemples :
les éléments d’un menu horizontal
les descriptifs produits d’un site catalogue (ex. catalogue MRP)
une série d’images avec descriptif (ex. galerie pentaxiste.org)
Dans ce cas, veiller à ce que la somme des largeurs de chaque élément (avec leurs marges) soit plus petite que la largeur du contenant. Si tel n’est pas le cas, le contenant s’étendra en hauteur, ce qui n’est certainement pas l’effet souhaité, pour un bloc menu en tous cas. Pour éviter l’extension du bloc contenant, utiliser la propriété "overflow:hidden".
A ne pas utiliser pour positionner précisément des éléments verticalement et horizontalement. Préférer le positionnement relatif.
Pourquoi ? Parce que tous les éléments d’une série d’éléments positionnés en float viendront "buter" en hauteur sur l’élément bloc précédant leur contenant ; il sera donc difficile de les positionner verticalement, à moins d’utiliser des marges. Ensuite pour le positionnement horizontal, à cause des différences de rendu et d’interprétation des marges et des paddings entre navigateurs. Au moins on sait que les instructions "width" et "height", ainsi que "top" et "left" utilisées avec l’instruction "position:relative" sont des notions universellement comprises par les navigateurs modernes...
Le mode de positionnement "relatif" :
Méconnu mais puissant, ce mode de positionnement permet de mélanger les atouts des 2 modes précédents. Il permet par exemple de disposer dans une page des blocs de contenu variable (donc de hauteur variable), suivis de blocs à l’intérieur desquels on souhaite positionner précisément certains éléments.
Il permet de positionner un élément par rapport à son bloc contenant (cas du 1er élément positionné en relatif dans le bloc), ou par rapport au dernier élément positionné en relatif du même bloc. La position en relatif est définie par rapport au positionnement "normal" qu’aurait le bloc si on ne le positionnait pas.
Exemple :
des entêtes de paragraphe comportant un onglet, un titre et une image, suivis d’un texte de longueur variable
