CSS : Quel positionnement choisir ?

Le CSS-P (Positionnement CSS) propose plusieurs méthodes pour placer les différents objets de son document.

Entre le positionnement absolu, relatif, fixé, et les positionnements flottants et à l'aide des marges, il est souvent difficile de faire son choix et de ne pas s'embrouiller.

Nous allons essayer de débroussailler ces différentes techniques afin d'y voir plus clair et de choisir la bonne méthode selon les cas...

Préambule : ce petit explicatif nécessite la connaissance préalable des différents positionnements et des balises bloc et en-ligne. Vous trouverez ces connaissances sur le site de référence OpenWeb, ou encore dans les tutoriels d'Alsacréations.

Le positionnement dans le flux

Le positionnement dans le flux, décrit sur le site d'Openweb ou encore ici-même, utilise les marges (margin) de l'élément pour le placer par rapport aux autres éléments.

Les marges sont à utiliser de préférence pour tous les éléments internes de la page : les textes, les images, bref : le contenu en général et les éléments en-ligne.

Un élément placé à l'aide de marges reste dans le flux du code HTML, il est donc dépendant de l'élément parent (conteneur) et des éléments frères.

Notons qu'une valeur spécifique de la propriété "margin", la valeur "auto", permet de centrer les éléments dans leur conteneur. Voir à ce sujet, le tutoriel sur le centrage.

Le positionnement relatif est hybride : par défaut, il laisse l'élément tel quel dans le flux. Cependant, permet de "décaler" cet élément dans le flux, mais uniquement si on donne une valeur à "top", "left", "right" ou "bottom", tout en le laissant dépendant des autres éléments positionnés. Pour ma part, j'évite ce positionnement car souvent inutile.

Le positionnement absolu et fixé

Ces positionnements sortent l'élément du flux : il n'est plus dépendant des autres éléments qui l'entourent (frères). Un tel élément est appelé "positionné" (notez qu'un élément en relatif est également dit "positionné" tout en restant dans le flux).

Un élément positionné se place par rapport à son premier ancêtre positionné.

Le Positionnement fixé (position: fixed) ne fonctionne pas sur Internet Explorer sans hacks et bidouillages. Il est donc préférable de s'en passer pour l'instant afin de ne pas être ennuyé.

Le positionnement absolu (position : absolute), est lui, bien plus intéressant et pratique. Il est idéal pour placer tous les conteneurs généraux, les grandes zones de la page, les éléments uniques (en-tête, menu, pied de page, ...).

Il faut cependant toujours éviter de placer les éléments internes et en-ligne à l'aide du positionnement absolu : dans ce cas, utilisez de préférence le positionnement à l'aide des marges.

Sachez également que les propriétés "top", "left" et "z-index" ne fonctionnent que si l'élément est "positionné" (position : absolute, relative ou fixed). Dans tous les autres cas, ces trois propriétés n'ont aucun effet.

Le positionnement flottant

Le positionnement flottant est un positionnement intermédiaire entre les positionnements absolus et avec marges.

L'élément sort du flux, mais reste dépendant des autres éléments flottants. On peut donc s'en servir pour placer plusieurs objets côte à côte très simplement.

Le positionnement flottant peut servir à placer des conteneurs tout autant que des éléments internes de contenu, mais attention car ce positionnement présente, selon les cas, des bugs sur certains navigateurs et nécessite des arrangements pour satisfaire certains défauts d'affichage (utilisation de "spacers")

A noter également qu'il n'existe que deux placements possibles : gauche et droite, et que la valeur "centré" n'existe pas.

Tableau récapitulatif

Conteneurs et blocs Elements internes, contenu Centrage Spécificités
Marges (margin, margin: auto) Non Oui Oui, centrage des éléments internes avec margin auto (incompatible avec "position") Reste dans le flux. Se positionne par rapport à l'élément parent (conteneur) et aux éléments frères
Position absolute Oui Non Oui, centrage des blocs à l'aide des marges négatives, incompatible avec le centrage en margin auto Sort du flux. Positionnement avec top, left (+ marges possible), superpositions possibles
Position relative Non Oui Oui, centrage compatible avec margin auto (compatible avec "position") Est décallé dans le flux + dépend de l'élément précédent s'il est positionné.
Position fixed Non Non Non Sort du flux tout en restant dans son bloc parent. Pose des problèmes sur Internet Explorer.
Position avec Float Oui Oui Non Sort du flux. Pas de float center. Attentions aux défauts d'affichages

Attention : ce tableau récapitulatif n'est qu'indicatif et approximatif. Il ne s'agit que d'une interprêtation personnelle fondée sur l'expérience. Certains spécialistes peuvent procéder de façon différente et tout à fait justifiée. Sachez cependant que ce tableau est fait pour vous simplifier la vie et éviter de vous embrouiller inutilement.

Par Raphael GOETTER - mercredi 14 juillet 2004 à 18:00

Astuces - #42 - Lu 22368 fois - Intérêt du billet: 2.53(51) - Fil RSS

Trackbacks

Le jeudi 15 juillet 2004 à 08:09, de Java et Companie :: #

Positionnement et CSS

un post intéressant sur comment utiliser le positionement avec CSS avec un beau tableau synthétique permettant de voir d'un coup d'oeil les différences. CSS : Quel positionnement choisir ? [Technology, 370 characters]

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le mercredi 14 juillet 2004 à 18:14, par ElMoustiko :: site :: #

Et bien personellement j'utilise les flottant, je suis un peu allergique au positionement absolu car je ne le trouve pas tres intuitif et j'ai du mal a faire ce que je veux avec ! Contrairement au positionement flottant avec lequel j'obtiens des resultats qui me satisfons. Pour ce qui est des "spacers" du flottant, j'en utilise generalement un pour permettre a mon footer de se positionner correctement, j'arrive a quelque chose de legerement bidouillé, il est vrai mais ca pas la mort non plus ! Par contre avec le positionement absolu, je n'ai jamais reussi a positionner un footer qui s'adapte a la hateur de la page. Donc mon choix est fait et malgres les bugs engendré par IE generalement dus au modele de boite. Le tableau que tu donnes est a mon avis tres interessant pour mieux s'y reperer et pouvoir choisir selon ses besoins bravo !

@++

Le mercredi 14 juillet 2004 à 18:26, par Sibelius :: site :: #

@ElMoustiko > certes, pour ce cas précis tu as un peu raison. Comme je l'ai dit, il y'a toujours des techniques diverses selon les utilisateurs spécialisés.
Mais tout le monde n'a pas de footer (et tout le monde ne connait pas les bugs d'IE). Je veux dire que ce n'est pas une généralité et le but était justement de généraliser les usages dans le tableaux, donc bien sûr, on ne peut pas tout prendre en compte ;)
Mais même avec un footer, je conserve en général mes positions absolues : www.alsacreations.com/art...

Le mercredi 14 juillet 2004 à 22:07, par Laurent Denis :: site :: #

Ton tableau récapitulatif est une excellente idée, à approfondir !

Une remarque sur les positionnements absolus et relatifs : ils extraient totalement du flux de positionnement par défaut l'élément concerné, pour le "plaquer" ailleurs (là où on le spécifie avec les propriétés top, left...) : la seule précaution à prendre est donc d'avoir réservé de la place à cet endroit-là ;) Il y a pour cela des marges, des largeurs... très faciles à spécifier.

(Et pour tout dire, une place "élastique", c'est à dire pas au pixel près).

Le jeudi 15 juillet 2004 à 09:44, par Yeca :: site :: #

Encore un article à garder en bookmark. Merci SIb.

Le jeudi 15 juillet 2004 à 10:01, par Ldo :: site :: #

comme elMoustiko, je suis allergique au positionnement absolu. je suis pour resté au maximum dans le flux, j'trouve ca plus cohérant et surtout y'a plus de sport :D
j'ai l'impression q'utiliser le positionnement absolu, c'est un peu la solution de facilitée.
c'est la méthode d'élaboration du document ki me gène un peu en fait.
avec absolu, on se fout un peu de l'ordre du code, rien n'empeche d'avoir le footer en haut de code, le menu au millieu ... (bref sortir trop facillement du flux). y'a pas à réflechir sur le code, alors qu'avec flux et float, ca oblige à réflechir aussi au code en même temps, faut garder en mémoire l'ordre des élément dans le visu et dans le code ... j'trouve ca plus 'sain' comme méthode de travail

donc pour moi, positionnement dans le flux à l'aide de marge, et de float :D
++

Le jeudi 15 juillet 2004 à 10:17, par Laurent Denis :: #

@ Ldo> "avec absolu, on se fout un peu de l'ordre du code, rien n'empeche d'avoir le footer en haut de code, le menu au millieu"

Pas tout à fait. L'ordre des éléments est déterminé **avant** la phase CSS, et celle-ci n'a pas de raison de le modifier. CSS est une simple "surcouche" sur le HTML, qui peut nécessiter d'ajouter à celui-ci quelques éléments span et div, des attributs class et id... mais qui ne doit pas conduire à modifier la structure HTML d'ensemble.

C'est en développant simultanéement HTML et CSS (démarche wysiwyg, qu'on utilise un tel éditeur ou non), qu'on risque en effet de se retrouver à mettre le HTML cul par dessus tête à coup de positionnements absolus ;)

Le jeudi 15 juillet 2004 à 10:31, par Ldo :: site :: #

on est d'accord Laurent, c'etait juste "l'exemple extrème" ;)

Le vendredi 16 juillet 2004 à 09:35, par Jep :: site :: #

Personnellement, je suis un fan du positionnement absolut (et relatif dans certain cas). Vous dites :

"avec absolu, on se fout un peu de l'ordre du code, rien n'empeche d'avoir le footer en haut de code, le menu au millieu"

Je trouve justement que c'est un point très interressant car cela permet de placer les menu en fin de flux et les contenues en debut de flux (ce qui n'est pas possible avec les flottants... exactement comme dans les design avec des tableaux). Ainsi, la lecture est beaucoup plus confortable pour les personne utilisant des navigateurs textes ou vocaux (ils n'ont pas à s'appuiller toutes une serie de menu chiant pour acceder au contenue !)

Le vendredi 16 juillet 2004 à 13:28, par ElMoustiko :: site :: #

Tu as les liens Acces au menu, Acces a la navigation (recommandé pour les sites accessibles) qui te permettent de sauter du haut de page au contenu ou au menu.
Et en mettant les menus tout en bas tu demandes a l'utilisateur de scroller les 8 000 lignes de contenu que tu as fait sur ton site tres bien fourni ! Pas beaucoup plus joyeux !

@++

Le mercredi 21 juillet 2004 à 18:22, par Kévin :: #

Personnellement, j'apprécie énromément le positionnement flottant, car en position:absolute, le conteneur ne prends pas les mêmes dimensions que l'élément positionné ... Donc, si vous avez un body sans hauteur défini, et que tous les élements à l'intérieur (menu , header, contenu) sont positionnés en absolute, le body fait 0px de hauteur :| ! Alors quand on veut une séparation de background entre le HTML et le BODY par exemple, erm, c'est pas très pratique!

PS : si vous connaissez un équivalent du < br style = 'clear:both' /> pour le positionnement absolute, je suis preneur !!!

Le mercredi 21 juillet 2004 à 21:15, par Sibelius :: site :: #

@Kévin : "le body fait 0px de hauteur". Tu es sûr? Et si tu testes en donnant une couleur de fond au body? ;)
D'ailleurs de toute façon je ne vois pas vraiment le soucis : ce n'est pas le body qu'on veut voir, c'est le contenu avec les éléments.

PS : "clear" ne fonctionne pas en position absolute et il n'y a pas d'équivalent : les div ne sont PAS des cellules et ne se comportent pas pareil.

Le dimanche 25 juillet 2004 à 12:23, par vchahun :: site :: #

Personellement, je trouve que si on veut centrer une page, on a pas trop le choix, il faut positionner en flottant; si IE interprétait l'absolu dans une boite correctement (ex: <div><div style="position:absolute; left:0; top:0">blabla</div></div>: blabla se retrouve non pas dans la div qui le contient, dans son coin gauche, mais dans le coin gauche de la page !), ça pourrait sans doute être possible de l'utiliser en centrant ...

Le dimanche 25 juillet 2004 à 19:05, par Sibelius :: site :: #

@vchahun :
- "si on veut centrer une page, on a pas trop le choix, il faut positionner en flottant"
>> J'avoue ne pas comprendre : c'est justement le seul positionnement qui ne permet pas de centrer... en tout cas à ma connaissance.

- "blabla se retrouve non pas dans la div qui le contient, dans son coin gauche, mais dans le coin gauche de la page !)"
>> Oui, c'est tout à fait logique puisque le div conteneur n'est pas positionné. Il faut qu'il soit lui-même positionné pour accepter en son sein des éléments positionés, sinon ceux-ci se réfèrent au dernier parent positionné c'est à dire le document.
Sur ce point, IE se comporte normalement (comme les autres) et conformément aux standards.

Je te cite l'extrait de l'article sur le positionnement : http://www.alsacreations.com/articles/div/

"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 mercredi 18 août 2004 à 11:24, par kurt :: #

Personnellement je n'ai pas de préférences, tous sont très utiles dans certains cas...
Je ne trouve pas très utile de préferer certains à d'autres.

Le mercredi 18 août 2004 à 12:24, par Raphael Goetter :: site :: #

@kurt > Exact, mais ton raisonnement tient parce que tu connais assez bien le domaine. Pour les débutants qui découvrent ce monde, ils sont rapidement dépassés par tous les positionnements et les spécificités (j'ai dit bug?) de chacun... d'où l'idée d'une synthèse globale même si elle est réductrice.

Le mercredi 18 août 2004 à 12:37, par Laurent Denis :: #

En relisant après coup ton article, deux petites remarques à propos des "float" :
- un float plaçant le plus à gauche/à droite possible l'élément concerné, il y a en effet peu de chance qu'il puisse comprendre une option "centrage" ;)
- D'autre part, un élément flottant ne sort pas vraiment du flux, puisqu'il continue à interagir avec les éléments en flux (ou flottants) qui le précèdent et le suivent... C'est d'ailleurs le point sur lequel apparaissent la plupart des bugs (liés à IE).

Le mercredi 18 août 2004 à 12:54, par Raphael Goetter :: site :: #

@Laurent >
- Je ne suis pas sûr d'avoir compris ton intervention. N'est-ce pas ce que j'ai voulu dire clairement avec ceci : "A noter également qu'il n'existe que deux placements possibles : gauche et droite, et que la valeur "centré" n'existe pas.", puis en indiquant "non" dans le tableau ?
- "un élément flottant ne sort pas vraiment du flux". C'est justement ce qui est gênant : que veut-dire "pas vraiment" ? un peu? parfois? Un élément positionné en relatif interagit aussi avec les autres éléments. Est-il lui aussi "pas vraiment" dans le flux ?
Un conteneur avec un élément flottant nécessite un spacer pour que ce dernier, sortant du flux, ne dépasse pas.

Le mercredi 18 août 2004 à 14:22, par Laurent Denis :: #

Bah, c'est peu être juste que cette idée de float "centré" m'a parue vraiment incongrue. Mais tu as raison de préciser que c'est impossible, pour éviter toute erreur ;)

Pour le rapport entre flux/relatif/float : à qui ça sert que OpenWeb, il se décarcasse ;) ?

"Le positionnement relatif permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement."
openweb.eu.org/articles/i...

"Une boîte flottante est retirée du flux **normal**, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre."
openweb.eu.org/articles/i...

"Le positionnement absolu **retire totalement** du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur."
openweb.eu.org/articles/i...

Relatif et float sont donc tout deux des éléments en flux, qui font chacun l'objet d'une modification :
- le premier est simplement "décalé" en hauteur/largeur.
- le second ne "rejette" plus les autres éléments blocs "à la ligne".

En fait, pour être tout à fait rigoureux, "relatif" devrait être traité ci-dessus avec le flux, et non avec les absolus/fixes.

Le mercredi 18 août 2004 à 14:37, par Raphael Goetter :: site :: #

"En fait, pour être tout à fait rigoureux, "relatif" devrait être traité ci-dessus avec le flux, et non avec les absolus/fixes."
>> L'erreur n'est-elle pas à la base du fait de la propriété "position" ? En effet, "positionner" l'objet (absolu, relatif, fixé) signifie le sortir du flux pour chaque valeur... sauf "relative".
Pour float, au-moins, c'est clair : c'est une propriété différente. La confusion n'est pas possible.

Le mercredi 18 août 2004 à 15:09, par Laurent Denis :: #

La confusion vient de ce que nous employons un vocabulaire intuitif, qui ne correspond pas au vocabulaire technique de la spec : dans celle-ci, tous les éléments ont un **shéma de positionnement** qui peut être :
- static, c'est à dire en flux normal ou relatif
- flottant
- absolu (ce qui inclut le fixe)

Et certains élément sont dit "positionnés" : tous ceux dont la valeur de "position" est différente de "static", c'est à dire les relatifs, les flottants, les absolus et les fixes. Les éléments positionnés ont un degré d'interaction décroissant avec les autres éléments. Du plus fort au plus faible :
- relatif (à peine plus faible que celui du flux)
- flottant
- absolu/fixe (il est nul dans ce cas)

Hum... Pas simple, en effet, peut-être :D

Le mercredi 18 août 2004 à 20:12, par Laurent Denis :: #

Tiens, à la réflexion, un petit tableau bien construit pourrait résumer beaucoup plus clairement les rapports entre "schéma de positionnement", valeur de la propriété "position" et "éléments positionnés/non positionnés". Faudrait s'y coller un de ces quatre ;)

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.