Le positionnement CSS permet de placer un élément dans un document HTML. Pour cela, il existe la propriété position et ses propriétés associées. Celles-ci vont nous permettre de définir l'emplacement final de l'élément.
Revenons rapidement sur les valeurs de la propriété position qui définissent le type de positionnement :
static : comportement normal attendu. Les propriétés de positionnement ne s'appliquent pas.
relative : l'élément ne sort pas du flux du document. Il se décale par rapport à lui-même.
absolute : l'élément sort du flux et sera positionné selon son élément parent.
fixed : L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (viewport).
sticky : La position de l'élément est calculée en fonction du flux normal du document. L'élément est décalé par rapport à son ancêtre de défilement le plus proche et par rapport à son bloc englobant.
Le contexte étant posé, nous allons pouvoir aborder le positionnement qui nous intéresse ici : le positionnement absolu.
Le positionnement absolu
Ah ! C'est le positionnement absolu. Tuons-le ! Tuons-le !
Vous avez sans doute usé, voire abusé de ce mode de positionnement, parfois à raison, souvent par dépit, tâtonnant avec l'ordre d’empilement. Dans certains cas , le positionnement absolu peut s'avérer déroutant.
Nous savons que le positionnement absolu retire l'élément du flux normal. Il est alors possible de placer un élément par dessus un autre (une superposition), mais pas seulement. Il peut se positionner à n'importe endroit selon l'élément parent.
Imaginons un exemple simple. Nous souhaitons afficher une image sur laquelle nous allons insérer une première couche (overlay) sur l'image, puis une seconde couche où nous allons placer du texte (cadre blanc flouté).
Dans un premier temps, nous mettons en place un conteneur global dans lequel nous ajoutons un positionnement relatif, nécessaire pour ensuite obtenir un positionnement absolu sur l'image de fond ainsi que sur l'overlay.
Tout d'abord, arrêtons-nous quelques instants sur l'overlay. Nous allons utiliser les pseudo-éléments et plus particulièrement ::after sur le conteneur global. Nous pourrions nous servir de ::before mais celui-ci se trouvant en premier dans l'ordre d'empilement, il nous faudrait ajouter la propriété z-index.
L'image, quant à elle, doit occuper tout l'espace. C'est pourquoi, en plus, de déclarer un positionnement absolu, nous ajoutons une hauteur ainsi qu'une largeur à 100%. De plus, pour éviter que l'image ne soit écrasée, nous déclarons la propriété object-fit et la valeur cover.
Pour finir, nous plaçons notre contenu au centre, lui aussi en positionnement absolu. En complément, nous allons utiliser les transformations CSS. Vous avez déjà sans doute vu ou utilisé la formule suivante pour centrer un élément avec le positionnement absolu :
Avec Le CSS Grid layout, une nouvelle ère est née. Ce modèle de disposition en grille propose un nouveau moyen de positionner des éléments, plus simplement et plus logiquement.
Superposition de couches
Ci-dessous, un autre exemple de couches superposées. Vous allez pouvoir constater que la mise en place est redoutablement efficace.
Comme la structure HTML ne change pas, passons directement au CSS. Si vous connaissez les grilles CSS, vous savez que le module repose sur des colonnes, des rangées ou encore des zones (area).
En lieu et place du positionnement absolu, nous allons disposer tous nos éléments dans la même zone. Si nous devons reprendre la même déclaration concernant l'image, en revanche, nous pouvons nous passer de définir une hauteur ainsi qu'une largeur sur le pseudo-élément. Celui-ci occupant toute la place, inutile également de le placer.
Il est ainsi facile de disposer le contenu au centre en utilisant le raccourci place-self, le contenur global étant en disposition en grille.
Slideshow
Avant l'arrivée des grilles CSS, le seul moyen de créer un slideshow en CSS était d'utiliser le positionnement absolu. On superposait les images les unes sur les autres et on mettait une animation CSS pour faire apparaître puis disparaître les photos.
Un exemple parfait qui illustre la facilité d'utilisation du Grid layout.
Là où les grilles CSS vont nous être particulièrement utiles c'est pour placer des éléments de contrôle. Au lieu de déclarer un positionnement absolu pour chaque élément de contrôle, nous allons simplement les placer grâce au valeurs de placement du Grid layout. Et cela va nous simplifier grandement la vie. De plus, nous allons gagner en visibilité au niveau du code.
Les grilles CSS bénéficiant d'un très bon support navigateurs, il est temps de les utiliser dans leur pleine mesure.
Le positionnement absolu est mort. Vive le positionnement absolu !
Comme nous avons pu le décrire en début d'article, le positionnement absolu permet de placer des éléments n'importe où sur la page, sans tenir compte de la disposition des autres éléments. Et c'est précisément pour cette raison que le positionnement d'ancre a vu le jour, dans le cas où vous souhaiteriez situer un élément par rapport à un autre.
Cette API a donc pour objectif "d'ancrer" un élément en positionnement absolu à un ou plusieurs autres éléments de la page, tout en permettant également de déterminer d'autres combinaisons de positions possibles (avec la règle@ @position-fallback) afin de trouver la plus adéquate selon où se situe l'élément dans le viewport.
Bien entendu, vous l'aurez compris, sous le titre faussement provocateur de l'article, vous pouvez toujours utiliser le positionnement absolu. D'ailleurs, dans certains cas, vous vous rendrez compte qu'il est préférable de mettre en place ce type de positionnement.
