Sais-tu que tu peux positionner n’importe quel élément (image, forme, texte…) à n’importe quel endroit, même hors de ta page Web ? Par exemple, des icônes de réseaux sociaux à gauche du site, un bouton pour remonter en bas à droite. Les positions CSS ont différentes valeurs (static, relative, absolute, sticky et Fixed) pour te donner un maximum de souplesse. Voyons ensemble comment les utiliser avec des exemples concrets et des exercices, avec ou sans WordPress (CMS) !
Positions CSS : Dans ce tuto, nous allons voir des cas concrets, mais avant je souhaite revenir sur quelques bases pour être sûr que tu comprennes bien ce tutoriel
Si tu souhaites apprendre à créer une ancre HTML, voir même un sommaire, cet article devrait t’intéresser.
Comment utiliser les positions CSS, avec ou sans WordPress ?
Tout d’abord, comme je suis sympa, je vais te laisser le choix d’utiliser WordPress ou non pour cet exercice. Autrement dit, tu peux utiliser par exemple un éditeur de texte tel que Sublime Text, Notepad++… avec un script HTML ou WordPress, la plupart des thèmes WordPress ont un éditeur de texte CSS dans Apparence -> Personnaliser et le module devrait s’appeler CSS additionnel. Sinon, installons un plugin pour avoir votre onglet CSS.
L’avantage en faisant cela avec WordPress, nous allons voir les changements instantanément, alors qu’avec un éditeur de texte, il faudra recharger la page Web systématiquement. C’est vrai qu’il existe des éditeurs de texte qui affiche le changement en direct, mais ils sont souvent payants !
Donc, si ton thème WordPress n’a pas de module CSS dans Apparence -> Personnaliser, alors nous allons télécharger une extension (sinon tu peux aller à l’étape suivante):
- Survol Extenions.
- Ensuite, clique sur Ajouter.
- Ecris « advanced CSS editor« .
- Ensuite, clique sur Installer maintenant.
- Clique sur Activer.
- Ensuite, clique sur Apparence.
- Enfin, clique sur Personnaliser.
Dans mon cas, l’extension n’a pas été à jour récemment, si tu l’installes et que tu rencontres des problèmes, dit-moi le dans les commentaires je t’en présenterai un autre.
Quel que soit le module CSS que tu utilises, nous allons le tester avant de l’utiliser, pour rappel, cela se trouve dans Apparence -> Personnaliser.
Dans le champ tu vas écrire :
h1 {
color:red;
}
Normalement, ta page ou ton article doit comporter un H1 (titre principal).
Si ton titre devient rouge : parfait, ça fonctionne. Alors, découvrons les positions : static, relative, absolute, sticky et Fixed.
Exercice CSS position : avec des formes
Pour commencer, tu vas créer un article, moi je vais l’appeler « Les plus beaux lits ». Pour rappel, cela se passe dans Article -> Ajouter.
Nous allons créer trois formes pour bien comprendre le fonctionnement de la propriété position, avant de passer à du plus concret. Pour ce faire, tu vas insérer des balises :
- Clique sur le plus.
- Ensuite, sélectionne HTML personnalisé.
- Enfin, écrit le code HTML que je te donne.
Voici le code : la lecture est plus simple pas vraie ?
Ensuite, va dans Apparence -> Personnaliser et choisis le module CSS
Position : static CSS
Copie et colle le code ci-dessous dans Apparence -> Personnaliser dans le module CSS ou dans ton éditeur de texte. Nous allons surtout nous concentrer sur position dans #form2.
div#container2 {
margin: 200px 0;
}
#form1 {
border: 3px solid green;
padding: 50px;
}
#form2 {
border: 3px solid red;
padding: 50px;
position: static;
}
#form3 {
border: 3px solid blue;
padding: 50px;
}
En fait, là nous avons à position la valeur static, c’est la valeur par défaut (c’est pour cela qu’il ne se passe rien !), c’est une mise-en-forme classique, elle ne va pas forcément nous intéresser, mais je voulais quand même te la présenter :
Position : relative CSS
Nous restons toujours sur #form2 mais au lieu d’utiliser la valeur static, nous allons mettre utiliser relative et nous allons ajouter la propriété top avec comme valeur 150px, qu’est-ce qui va se passer d’après toi ?
div#container2 {
margin: 200px 0;
}
#form1 {
border: 3px solid green;
padding: 50px;
}
#form2 {
border: 3px solid red;
padding: 50px;
position: relative;
top: 150px;
}
#form3 {
border: 3px solid blue;
padding: 50px;
}
La forme 2 est descendu de 150px, son point de départ est le coin du haut à droite de la forme 1. Tu remarqueras quelque chose d’autre de particulier : la forme 3 n’a pas bougé, nous allons voir maintenant que cela n’est pas toujours le cas.
Dans l’exemple plus haut, nous avons utilisé l’unité de mesure px, mais tu peux également utiliser %.
Plus haut, j’ai utilisé la propriété top, mais cela fonctionne également avec bottom, right et/ou left, tu peux essayer.
Position : absolute CSS
Continuons à explorer les positions CSS, nous faisons toujours un focus sur la #form2, mais cette fois-ci, à position nous allons lui donner la valeur de absolute et rajouter la propriété top, la valeur sera de 50px, qu’est-ce qu’il se passe ?
div#container2 {
margin: 200px 0;
}
#form1 {
border: 3px solid green;
padding: 50px;
}
#form2 {
border: 3px solid red;
padding: 50px;
position: absolute;
top: 50px;
}
#form3 {
border: 3px solid blue;
padding: 50px;
}
Ohh… la « forme 3 » est collée à la « forme 1 » ! Et oui, c’est une grande différence avec la valeur relative, mais pas que ! Le départ n’est plus le coin du haut de droite de la « forme 1 », mais le haut de ton navigateur. Tu ne me crois pas ? Mets top à 0px.
Passons maintenant à du concret 😊
Quand utiliser position absolute ?
Un exemple d’utilisation de position absolute : pour positionner du texte au-dessus d’une image. Nous allons maintenant voir cela de façon concrète.
Positions CSS : Exemple avec un code en position absolute
Nous allons voir avec un exemple concret comment utiliser les positions CSS. Sur ton Gutenberg ou sur ton éditeur de texte, place le code suivant (pour rappel si tu utilises Gutenberg le module s’appelle HTML personnalisé) :
Attention aux erreurs de frappes !
N’oublie pas d’adapter le chemin et le nom de tes images (src de tes balises img, ainsi que le nom). Chez moi la première image s’appelle 1 la seconde 2 la troisième 3. Bien sûr, je te déconseille d’appeler tes images de cette façon, cela n’est pas bon pour le SEO (référencement naturel), mais pour un exemple pourquoi pas :
Pour que cet exercice fonctionne au mieux, assure-toi si tu es sur WordPress que le container de ton article soit en « Full Width ». Ce réglage se fait en général dans Apparence -> Personnaliser ou sur l’article même. Par exemple, j’utilise le thème Neve, le réglage se fait sur l’article dans la barre latérale :
Maintenant, mettons le code CSS, toujours dans Apparence -> Personnaliser -> CSS :
div#container {
text-align: center;
}
h1, p {
font-family: -webkit-pictograph;
}
p {
font-size: 25px;
}
.block {
display: inline-grid;
}
div#bloc2 {
margin: 0px 15px 0px 15px;
}
img {
width: 300px;
height: 450px;
}
#static {
position: static;
}
#absolute {
position: absolute;
top: 23%;
left: 47%;
}
Le résultat d'un exemple en position absolute
Si tu es sur WordPress, comme toujours la magie a opéré, tu vois en direct les modifications. Le problème, le résultat n’est pas terrible pas vrai ? Nous ne voulons pas que la troisième image soit mise à la ligne, et « absolute » est mal positionné(e) :
Va plutôt sur la même page de ton site, pour cela il faut d’abord publier la page. Maintenant, tu verras un affichage plus harmonieux :
Que remarquons-nous ? Le mot « absolute » est positionné sur l’image mais pas les autres. C’est justement le mot « absolute » qui est en position absolute dans notre code CSS. Pour déplacer ce mot, j’ai utilisé top avec une valeur de 23% et left à 47%. Tu peux modifier ces réglages si tu veux, d’ailleurs, essayes de donner la valeur de 0 à top et left : où est passé « absolute » ? On ne joue plus à « où est passé Charlie », mais « où est passé « absolute » ? » lol.
Quand utiliser position relative ?
Comme nous l’avons vu avec les formes plus haut, « relative » fonctionne différemment.
Nous allons définir le contenu dans ton éditeur de texte ou sur Gutenberg si tu es sur WordPress. Place le code suivant dans le module HTML personnalisé (WP).
Si tu observes bien, le code ressemble beaucoup au précédent, tu n’as pas besoin de t’embêter à le recopier à nouveau, mais juste à modifier les éléments qui ne correspondent plus.
N’oublie pas de modifier le chemin des images, sinon elles vont être cassées.
Dans Apparence -> Personnaliser -> CSS. Ajoute le code suivant :
div#container {
text-align: center;
}
h1, p {
font-family: -webkit-pictograph;
}
p {
font-size: 25px;
}
.block {
display: inline-grid;
}
div#bloc2 {
margin: 0px 15px 0px 15px;
}
img {
width: 300px;
height: 450px;
}
.relative {
position: relative;
top: 120px;
}
Là, nous avons notre image du centre en position relative, avec top à 120px, l’image et le texte sont poussés vers le bas, et entre le haut droit du coin de l’image 1 et le haut du coin gauche de l’image du milieu, il y a 120px. Tu peux modifier la valeur, ou même utiliser bottom, left ou right pour voir le changement qui se produit :
CSS Sticky : Création d'un menu
Continuons à découvrir les positions CSS. Si tu es sur WordPress, tu as certainement déjà un menu en place. pour découvrir la valeur Sticky de position, nous allons créer un menu. Sur « Gutenberg » module HTML personnalisé ou sur ton éditeur de texte, place le code suivent (tu peux placer ce code au-dessus du précédent, tu n’as pas besoin de l’effacer) :
Pareil pour le code CSS, tu peux le mettre à la suite des autres codes dans Apparence -> Personnaliser -> CSS :
/* MENU */
ul#menuTest {
text-align: center;
background-color: #53d3aa;
opacity: 0.9;
padding: 20px 0;
border-radius: 10px;
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 1000;
}
li {
display: unset;
font-family: system-ui;
color: white;
font-size: 1.3em;
padding: 0 10px;
}
La particularité de position sticky, lorsque nous scrollons le menu va suivre et rester affiché à l’écran. En mettant top à 0px, le menu va se coller en haut du navigateur au moment du défilement. Cela donne un petit effet sympa, bien sûr, il est possible d’utiliser une autre valeur que « 0px ».
Positions CSS : Fixed
Tout d’abord, avec la valeur fixed de la propriété position, tu pourras placer n’importe quel élément là où tu le souhaites sur l’écran, celui-ci restera figé comme un Welsh Guards !
Les réseaux sociaux en position fixed
Nous allons fixer nos réseaux sociaux, tu pourras scroller autant que tu le veux, les logos des réseaux ne bougeront pas !
Choisis le code que tu peux mettre dans ton éditeur de texte ou dans HTML personnalisé de « Gutenberg » (n’oublie pas de modifier le chemin de src pour que le navigateur puisse récupérer les images, d’ailleurs, ajoute également des logos de réseaux sociaux) :
Dans Apparence -> Personnaliser tu pourras mettre le code qui suit avant ou à la suite du précédent :
/* RESEAUX SOCIAUX */
.positionFixed {
width: 32px!important;
height: 32px!important;
}
#testReseauxSociaux>img:nth-of-type(1) {
position: fixed;
top: 300px;
left: 50px;
}
#testReseauxSociaux>img:nth-of-type(2) {
position: fixed;
top: 340px;
left: 50px;
}
#testReseauxSociaux>img:nth-of-type(3) {
position: fixed;
top: 380px;
left: 50px;
}
Nos réseaux sociaux sont bien en place : c’est pratique, le visiteur pourra poster un message de n’importe quel endroit de l’article. Mais dans notre cas, il s’agit que de visuel, ces icônes ne sont pas actives :
Sur cet exemple, nous plaçons la première icône à 300px du haut de l’écran. Le suivant à 340px et le dernier à 380px, nous laissons un écart de 40px pour créer un espacement.
Chaque icône à un espace de 50px de la gauche, pour que les icônes ne soient pas collées à l’écran. Ceci dit, rien n’empêche de laisser les icônes collées à l’écran.
Je te donne un exercice, reproduits l’image suivante : un escalier avec les icônes des réseaux sociaux :
Oui c’est ça, l’icône Pinterest garde left à 50px, l’icône Facebook change à la propriété left et reçoit la valeur de 100px et Instagram à left reçois la valeur de 150px.
Vers le haut en position fixed
Tu as déjà vu cela, en bas à droite d’un site, quand tu cliques sur la flèche vers le haut, le navigateur te remonte automatiquement tout en haut de l’article ou de la page ? Tous les sites n’ont pas cette flèche, d’ailleurs, ce n’est pas obligatoire. Nous allons faire cela, toujours avec la valeur fixed.
Sur ton éditeur de texte ou dans HTML personnalisé de « Gutenberg » si tu es sur WordPress, écris ce code HTML :
Bien sûr, après avoir importé l’image dans WordPress si tu l’utilises, n’oublie pas de renommer la valeur de src, pour que le navigateur trouve image.
Ensuite, dans Apparence -> Personnaliser -> CSS si tu es sur WordPress, copie colle ce code CSS :
/******** FLECHE VERS LE HAUT */
img#versHaut {
background-color: #53d3aa;
border-radius: 20px;
padding: 5px;
position: fixed;
bottom: 30px;
right: 50px;
}
Observe le résultat sur ton site :
Sympa, pas vrai ? là encore, c’est que du visuel, la flèche n’est pas active. Après avoir mis position fixed, j’ai utilisé la propriété bottom, pour placer l’icône à 30px du bas et à 50px de la droite de l’écran. tu peux modifier ces valeurs si tu le souhaites.
Exercice : Place maintenant la flèche vers le haut sous l’icône Instagram. Mais en utilisant uniquement la propriété bottom et right : la flèche sera le 4ème réseau social !
Si tu reproduis cet exercice avec un écran différent, tu verras, les valeurs ne seront pas les mêmes !
Les positions CSS : un débrief
Même si l’utilisation de position peut paraitre amusant et très pratique, il y a quelque chose qu’il ne faut pas oublier, c’est qu’avec le responsive tu peux avoir de mauvaises surprises. D’ailleurs, nous avons vu cela quand nous étions dans « Apparence -> Personnaliser », le positionnement n’était pas top. À ce propos, depuis l’arrivée des smartphone, position absolute n’est plus aussi populaire, mais d’autres reste très utilisés comme les valeurs « sticky » et « fixed ».
En résumé, nous avons vu :
Position static : la valeur par défaut. Je crois que je ne l’ai jamais utilisé, à part pour ce tutoriel 😉
Ensuite, position relative : permet de déplacer un élément tout en laissant les autres éléments figés. Son point de départ correspond à son endroit initial.
Position absolute : si un bloc se trouve sur sa droite, il prendra la place de l’élément qui est en absolute.
Ensuite Sticky : Il va suivre la navigation au moment du scroll.
Enfin, position fixed : celui-ci se fige là où on le positionne, comme s’il était collé. Même en scrollant pas moyen de s’en débarrasser.
Ce qu'il faut retenir des positions CSS
Nous l’avons vu, dans certaines situations la propriété « position » peut être très pratique. Mais attention quand même de vérifier le résultat avec le responsive (smartphone, tablette…), sinon une drôle de surprise peut apparaître. C’est très pratique pour positionner un élément sur l’autre ou encore pour figer un élément. D’ailleurs, nous pouvons utiliser « position » avec n’importe quoi : image, texte, forme…
Quand utilises-tu la propriété position ? Et si tu ne l’as jamais utilisée, penses-tu l’utiliser à quel moment ?
Article très intéressant.
J’avoue que dans mon cas, j’utilise Divi, ce qui permet de jouer assez facilement avec les positions des différents blocs. Mais c’est très intéressant de comprendre exactement, dans le code, comment cela se matérialise. En comprenant le principe, ça peut notamment aider à résoudre des petits bugs d’affichage 🙂
Donc merci à toi pour ces précisions
Merci et merci pour ton commentaire. Oui, cela permet de mieux comprendre le fonctionnement d’un site Web.