La propriété position
La propriété position accepte 4 valeurs: static (par défaut), relative, absolute et fixed. Une erreur de débutant est d'abuser du positionnement absolut qui semble plus facile d'utilisation que d'autres techniques de positionnement.
position:absolute
Ce positionnement permet de retirer complètement un élément du flux. il se positionnera à sa place logique du flux mais deviendra "invisible" pour le reste de la page. Ainsi, les éléments suivant, normalement dans le flux, se positionneront-ils au même niveau que notre élément absolu, créant des chevauchement.
Plutôt qu'il reste à sa place d'origine, on peut positionner notre élément absolu à l'aide des propriétés top, bottom left et right en référence à son plus proche ancêtre positionné (c-t-d un ancêtre qui possède la propriété position avec une autre valeur que static), ou, par défaut, la fenêtre de visualisation. On pourra l'utiliser pour placer des éléments à un endroit précis.
position:fixed
ce positionnement ressemble beaucoup au positionnement absolu à l'exception qu'il fait toujours référence à la fenêtre de visualisation et que l'élément restera figé sur la page. Il ne se délacera pas lors d'un scroll. On pourra par exemple fixer une barre de navigation tout en haut de la fenêtre.
particularités des éléments en fixed ou absolute
- ce position induit un type block, inutile donc de redéfinir la propriété display (inline-block, table,...)
- par défaut, l'élément adapte sa dimension horizontale à son contenu, contrairement au comportement d'un type block normalement dans le flux
- lorsqu'on fixe à 0 les 2 propriétés opposées (top et bottom) (left et right) l'élément occupe alors tout l'espace à disposition dans son référant.
position:relative
Le position:relative permet de déplacer un élément par rapport à sa position logique dans le flux, sans interagir avec les autres éléments. On pourra, par-exemple l'utiliser pour rehausser un mot dans un texte.
En réalité, l'attribution d'un position relative est rarement déclaré dans le but d'un déplacement de l'élément. Dans la majeurs partie des cas il sert:
- A rendre le conteneur référent pour un positionnement absolu d'un de ses descendants
- A gérer l'empilement des éléments
l'empilement des éléments dans l'axe des z
On a vu que le flux se déroulait sur l'axe horizontal et vertical. Par principe, les éléments viennent à la suite des autres et ne se chevauchent donc pas. Cependant, si on les force à se chevaucher (par exemple à l'aide d'un margin-négatif), on constate que, dans la plus part des cas, les éléments non positionnés s'empilent les uns sur les autres, dans l'ordre où ils apparaissent dans le html. Une explication détaillées des règles de priorités se trouve dans l'appendixe E des recommendations css2.1.
En donnant une valeur absolut, fixed ou relative à la propriété position, on va, en quelque sorte, forcer notre élément et se mettre tout en haut de la pile. Si deux éléments sont positionnés, alors, ce sont de nouveau les règles de l'appendixe E qui décideront duquel doit venir au sommet.
La propriété z-index
Z-index permet de modifier l'empilement logique des éléments. Elle ne s'applique que pour les éléments positionnés. Plus le z-index est élevé, plus notre élément sera au sommet de la pile. Il est inutile d'en abuser; la plus part du temps, l'ajout d'un simple position:relative, ou un placement judicieux dans le html, peut suffire à régler les problèmes de chevauchement.
Editer