FAQ version Beta 0.5
Bases et indispensables
Quel type de 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.
----
1) Le positionnement dans le flux (positionnement naturel)
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.
----
2) 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.
----
3) 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.
----
CONCLUSION :
Le positionnement naturel (en flux) des éléments est à préférer dans tout les cas et autant que possible (surtout pour les contenus). Le flux naturel permet d'éviter le plus grand nombre d'incompatibilités et de problèmes de mise en page.
Il ne faut se tourner vers les autres cas que lorsque le positionnement en flux n'est pas réalisable (éléments côte à côte, etc.) ou pour les grandes zones de la page. A noter que les principaux bugs ou mauvaises interprétations des navigateurs ont lieu sur ces positionnements hors-flux.
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.
----
1) Le positionnement dans le flux (positionnement naturel)
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.
----
2) 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.
----
3) 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.
----
CONCLUSION :
Le positionnement naturel (en flux) des éléments est à préférer dans tout les cas et autant que possible (surtout pour les contenus). Le flux naturel permet d'éviter le plus grand nombre d'incompatibilités et de problèmes de mise en page.
Il ne faut se tourner vers les autres cas que lorsque le positionnement en flux n'est pas réalisable (éléments côte à côte, etc.) ou pour les grandes zones de la page. A noter que les principaux bugs ou mauvaises interprétations des navigateurs ont lieu sur ces positionnements hors-flux.
Liens complémentaires