Blog Alsacréations

Très souvent, les "spécialistes" qui écument les forums de webmasters se font un plaisir de lapider les pauvres nouveaux du fait que la position absolue est trop contraignante et que ça fait "newbie" qui utilise Dreamweaver.

En effet, le positionnement absolu a des désavantages du fait de sa rigidité apparente : il ne permet pas (ou difficilement) l'adaptation du site aux différentes résolutions par exemple.

En tout cas, c'est ce que je croyais aussi au début. Je réfutais presque systématiquement le positionnement absolu car il était synonyme de "figé"... et pourtant ce n'est pas du tout le cas contrairement aux idées reçues.

Cette rigidité n'est que fictive et due aux valeurs fixes données en général par les logiciels qui génèrent du code automatiquement comme Dreamweaver (rappelons que ce logiciel insère par défaut, outre la position absolue, les propriétés top, left, z-index et que sais-je encore).

• On peut très bien positionner en absolu avec des valeurs en pourcentage ou en em tout en ayant une mise en page totalement fluide qui s'adapte aux résolutions et aux changements de taille de police.
• On peut également très bien centrer un site ou des éléments avec des positions absolues. Il suffit pour cela d'utiliser les marges négatives qui fonctionnent très bien sur tous les navigateurs depuis les versions 4.

Il faut simplement comprendre comment ce positionnement fonctionne et ne pas se contenter des positionnements "à la dreamweaver".

Note : Sachez également que c'est le seul moyen de superposer deux blocs (avec la propriété z-index)

Quelques explications

Lorsqu'il est en position absolue (ou relative), le bloc est dit "positionné". Il est retiré du "flux" du code HTML : son positionnement sera le même quelle que soit l'emplacement de la balise dans le conteneur. Le bloc est placé par rapport à son conteneur s'il est lui-même positionné, ou alors par rapport à la page entière (body)... le mythe général est souvent de croire qu'un élément en position absolue est toujours placé par rapport au coins de la page, ce qui est faux.

Precision : Lorsque le conteneur est en flux ou en float, il suffit de lui donner un position: relative sans préciser de top et autres left pour le positionner... là où il est déjà. De la sorte, son contenu peut désormais être lui-même positionné (merci Laurent Denis pour cette précision)

En absolue, le bloc est généralement placé à l'aide des propriétés "top" et "left" par rapport au coin supérieur gauche du conteneur. Si les valeurs top et left sont inexistantes, le bloc apparait là où il est déclaré ce qui peut servir pour placer correctement dans la page des éléments superposés sans avoir de zone vide crée comme avec les positions relatives.

Alternative des Flottants

Souvent utilisé en lieu et place des positions absolues, le positionnement flottant n'offre pas que des avantages. Son utilisation n'est pas toujours intuitive et nécessite parfois du bidouillage pour fonctionner (utilisation des clear both... ou "le retour de la vengeance du spacer.gif")

Pire : son interprêtation est même parfois buggée sur les navigateurs tels que Internet Explorer, en voici un exemple [en], un autre [en], un suivant [en] et un dernier [en] !

En attendant une meilleure reconnaissance des différents navigateurs, j'ai préféré me passer autant que possible des positions flottantes pour la structure globale de ma page web.

Conclusion

Pour résumer : en ce qui concerne les grandes zones de la page (en-tête, contenu, menu, pied de page,...), je positionne dorénavant en absolu... ensuite, les éléments internes (contenu) sont évidemment positionnés eux-même d'après le contexte (simplement avec les marges en général).

Notez bien la distinction : pour les éléments internes, il est important de ne pas les positionner en absolu car dans ce cas, ils perdraient effectivement de leur souplesse et leur fluidité les uns par rapport aux autres.

Pour finir donc, je le clame haut et fort : Redonnons ses lettres de noblesse à la position absolue !