Oui, enfin ! Je sais, je ne suis pas fier d’avoir fait l’impasse sur cette propriété CSS aussi longtemps, honte sur moi ! Enfin bref, mieux vaut tard que jamais.
Même si j’ai un demi siècle de retard (enfin presque), mais que j’ai tout de même l’impression d’avoir fait une grande découverte, je la partage avec vous dans cet article.
Un rapide résumé de l’utilité de position:absolute
Cette propriété CSS sert à positionner un élément en… absolu. Comme son nom l’indique.
En un peu plus clair, on peut positionner un élément, un <div> par exemple, à un nombre de pixel défini.
Par exemple :
.en-haut-a-droite{ position: absolute; top: 10px; right: 10px; } |
Cette classe CSS sert à positionner, en absolu donc, un élément à dix pixels du haut et à dix pixels à droite.
Tout ceci a l’air tellement logique, quelle était mon erreur ?
Ce qui clochait…
Ce que je n’avais pas compris, c’est qu’il est possible de définir à partir de quel élément la position est absolue.
En clair, l’exemple plus haut permet de définir la position de l’élément par rapport à la page complète. Et pour positionner l’élément relativement par rapport à un parent ?
Il suffit de définir la propriété position:relative à ce parent. Encore une fois, comme son nom l’indique.
Par exemple :
.element-parent { height: 100px; background-color: #2980b9; position: relative; } .en-haut-a-droite{ position: absolute; top: 10px; right: 10px; } |
<div class="element-parent"> Ceci est l'élément parent <div class="en-haut-a-droite"> En haut à droite </div> </div> |
Ce qui donne :
Parent
Le <div> enfant est bien positionné en haut à droite de son <div> parent.
Si la propriété position:relative n’était pas définie pour le <div> parent, le <div> enfant serait en haut à droite de la page, ou d’un autre parent qui aurait cette propriété.
Le mot de la fin
En fait je n’étais pas fan de ces positions relatives, je préférais le positionnement statique, qui me semble tellement plus logique. Mais quelquefois c’est bien plus pratique d’indiquer une position absolue, ou même de temps en temps, on n’a pas le choix.
Enfin, dans certains cas leur utilisation est même préconisée.
Pour me rendre compte de ce détail, il m’a suffi de… lire la documentation. Comme quoi, on y revient toujours…
La semaine prochaine je vous expliquerai une autre de mes incroyables découvertes : comment faire des glaçons. Ou pas.
Bonjour David,
Ce nouveau code m’intéresse en ce moment j’essaie de travailler sur le même style d’effet.
Je découvre la position relative grâce à votre article.
Mais moi quand je veux mettre 2 Div sur la même position j’utilise le code CSS « float ». Est-ce que la position relative est différente de « Float » (Float:right ou Float:left)?
Bonjour Iola,
En effet, la propriété float peut servir à la même chose. La grande différence avec position : float permet d’aligner un élément par rapport au précédent, pour les placer côte à côte.
Tout dépend de ce que tu veux faire. Cette page explique bien les différences : http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
David
Bonjour. En fait, la règle est simple :
Un élément positionné en absolu est positionné par rapport à l’ancêtre positionné le plus proches. Si aucun ancêtre n’est positionné, il est positionné par rapport au body. (il arrive que le body ne prenne pas tout le la largeur.)
Ce ne sont pas forcément les bords haut et droit du conteneur de référence qui sont pris en compte, ce sont ceux des attributs précisés. Dans cette règle : {position: absolute; left : 50px; bottom: 100px } , l’élément sera positionné à 50px du bord gauche et 100px au-dessus du coin (gauche) du bas.
Si on a bien ça en tête, tout est clair.
Pour être exhaustif, il faut préciser que le positionnement peut être déplacé de quelques pixels par rapport aux valeurs indiquées. Cela est dû à la valeur line-height du parent positionné qui est rarement précisée en css. On peut être sûr du résultat en ajoutant la règle
box-sizing: border-box
au parent. Ceci a quelques conséquences (qui peuvent être à l’occasion intéressantes) : les dimensions extérieures de cet élément sont bien celles indiquées dans le CSS, quels que soient les bordures, padding et line-height de celui-ci.
Bien comprendre aussi, qu’un élément positionné en absolu sort du flux, contrairement à ceux qui sont positionnées en relatif. En quelque sorte, pour le positionnement des autres éléments, c’est comme s’il n’était pas là.
On règle les superpositions par l’attribut css z-index. Plus la valeur (un nombre) est grande, plus haut est l’élément dans les couches. (7 sera par-dessus 6)
Penser à donner un fond aux éléments positionnés ainsi, sinon ils apparaissent en transparence.
Tant qu’on y est, précisons que les éléments fixes sortent également du flux et sont positionnés par rapport à la fenêtre.
Les éléments positionnés en relatif ont la même influence envers les positions des autres éléments que s’il n’étaient pas décalés.
Vous avez tout suivi ? Z’êtes alors les rois ! Enfin, pas tout à fait. Il faut maitriser aussi les différents « display » (notamment inline-block) , et autres « float » !
Bonjour Domi,
Merci pour ton commentaire, très bien expliqué 🙂
David