Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de position, et comment les utiliser.

Prérequis: Les fondamentaux du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Introduction à CSS.)
Objectif: Savoir comment fonctionne le positionnement avec les CSS.

Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de 0_basic-flow.html sur le dépôt Github (code source ici) et utilisez-le comme point de départ.

Introduction au positionnement

L'idée globale du positionnement est de permettre le contrôle du cours normal de mise en page classique décrit plus haut pour produire des effets intéressants. Mettons que vous voulez modifier légèrement le placement de quelques boîtes par rapport à leur position par défaut dans le cours normal de mise en page du document pour donner une touche d'excentricité, ou bien, créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page tout en restant à la même place à l'intérieur de la fenêtre du navigateur quel que soit le point de défilement de la page : le positionnement est l'outil qu'il vous faut car il rend de tels agencements possibles.

Il y a de nombreux types différents de positionnement dont vous pouvez profiter sur les éléments HTML. Pour rendre effectif un type en particulier de positionnement sur un élément, nous utilisons la propriété position.

Positionnement « static »

Le positionnement static est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ».

Pour démontrer cela et avoir un exemple prêt pour les prochaines sections, ajoutez tout d'abord une  classe positioned pour le deuxième <p> dans le HTML:

<p class="positioned"> ... </p>

Puis ajoutez la règle suivante au bas de votre CSS:

.positioned {
  position: static;
  background: yellow; }

Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a pas de différence du tout, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct — comme nous l'avons dit plus tôt, le positionnement statique est le comportement par défaut!

Remarque : ce lien 1_static-positioning.html (voir le code source) pointe sur un exemple de positionnement « static ».

Positionnement « relative »

Le positionnement relatif est le premier type de positionnement que nous allons voir. C'est très similaire au positionnement statique, sauf qu'une fois que l'élément positionné occupe sa place dans le cours normal de disposition, vous pouvez modifier sa position finale avec même la posibilité de le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de position dans le code :

position: relative;

Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés top, bottom, left et right que nous expliquons dans le prochain paragraphe.

Présentation de « top », « bottom », « left » et « right »

top, bottom, left et right sont utilisés conjointement à position pour définir exactement là où placer l'élément à positionner. Pour tester cela, ajoutez les déclarations suivantes à la règle .positioned dans la CSS :

top: 30px;
left: 30px;

Remarque : les valeurs de ces propriétés peuvent prendre n'importe quelle unité logiquement attendue — pixels, mm, rem, %, etc.

Si maintenant vous enregistrez et actualisez, vous verrez un résultat de ce type :

Cool, hein ? Ouais, mais ce n'était probablement pas ce à quoi vous vous attendiez — pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini top (haut) et left (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif — vous devez penser à une force invisible poussant le côté de l'élément à positionner, le déplaçant dans la direction opposé. Pour exemple, si nous spécifions top: 30px;, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.

Remarque: à ce stade de l'article, vous pouvez voir un exemple ici 2_relative-positioning.html (voir le code source).

Positionnement « absolute »

Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de position dans le code ainsi :

position: absolute;

Si maintenant vous enregistrez et actualisez, vous verrez  quelque chose comme ceci :

Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû  se trouver dans le cours normal d'affichage du document ne s'y trouve plus — le premier et le troisième élément sont tous deux à côté comme s'il n'existait plus ! Dans un certain sens, c'est exact. Un élément positionné de manière absolus ne fait plus partie du cours normal de mise en page classique du document. À la place, il se trouve sur une couche à part séparée de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup) et des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut faire glisser et époser n'importe où sur la page, et bien plus encore.

Ensuite, voyez que la position de l'élément a changé — car top, bottom, left et right se comportent diféremment avec le positionnement absolu. Au lieu d'indiquer la direction dans laquelle l'élement doit se déplacer, ils définissent la distance à laquelle l'élément doit être par rapport aux côtés de l'élément contenant. Donc, dans ce cas, nous disons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément contenant ».

Note : vous pouvez utiliser top, bottom, left et right pour redimensionner les éléments selon vos besoins. Définissez top: 0; bottom: 0; left: 0; right: 0; et margin: 0; sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...

Note : oui, les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.

Note : à ce stade de l'article, vous pouvez voir un exemple ici 3_absolute-positioning.html (voir le code source).

Contextes de positionnement

Quel élément est « l'élément contenant » d'un élément à positionner de manière absolue ? Par défaut, c'est l'élément <html> — l'élément à position absolue est imbriqué dans l'élément <body> dans le code source HTML, mais dans le rendu final, il est éloigné de 30px du haut et de la gauche du bord de page, qui est l'élément <html>. Cela s'appelle plus précisément le contexte de positionnement de l'élément.

Nous pouvons changer ce contexte de positionnement — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body:

position: relative;

Cela devrait donner le résultat suivant:

À présent, l'élément a été positionné par rapport à l'élément <body>.

Note : à ce stade, vous pouvez voir cet exemple ici 4_positioning-context.html (voir le code source).

Présentation du z-index

Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré — quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ?

Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}

A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouvait à l'origine. Il est également empilé sous le paragraphe .positioned original, là où les deux se chevauchent. C'est parce que le paragraphe .positioned est le deuxième paragraphe dans l'ordre du code source ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source.

Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété z-index. « z-index » est une référence à l'axe z. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas).

Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de z-index} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un z-index  auto, qui est effectivement 0.

Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle p:nth-of-type(1) :

z-index: 1;

Voici maintenant l'exemple terminé :

Notez que z-index n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.

Note : sur ce sujet, vous pouvez voir l'exemple 5_z-index.html (voir le code source).

Positionnement « fixed »

Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément <html> ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants.

Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de p:nth-of-type(1) et .positioned de la CSS.

Maintenant, mettez à jour la règle body : supprimez la déclaration position : relative ; et ajoutez une hauteur fixe, ainsi :

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

Maintenant, donnez la position fixed à l'élément <h1> et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :

h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin: 0 auto;
  background: white;
  padding: 10px;
}

top: 0; est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique margin: 0 auto; pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui.

Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :

p:nth-of-type(1) {
  margin-top: 60px;
}

Voici l'exemple terminé :

Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici  6_fixed-positioning.html (voir le code source).

« position: sticky »

Il y a une autre valeur de positionnement disponible appelée position : sticky. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.

.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}

Une utilisation courante pleine d'intérêt de position: sticky permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :

<h1>Positionnement collant</h1>

<dl>
    <dt>A</dt>
    <dd>Abeille</dd>
    <dd>Abricot</dd>
    <dd>Altimètre</dd>
    <dd>Avion</dd>
    <dt>B</dt>
    <dd>Banane</dd>
    <dd>Betterave</dd>
    <dd>Bœuf</dd>
    <dd>Bouvreuil</dd>
    <dd>Buzzard</dd>
    <dt>C</dt>
    <dd>Calculateur</dd>
    <dd>Camera</dd>
    <dd>Cane</dd>
    <dd>Chameau</dd>
    <dt>D</dt>
    <dd>Dime</dd>
    <dd>Dindon</dd>
    <dd>Drapeau</dd>
    <dd>Drone</dd>
    <dt>E</dt>
    <dd>Eau</dd>
    <dd>Éléphant</dd>
    <dd>Escadrille</dd>
</dl>

Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments <dt> défilent avec le contenu. Quand on ajoute position : sticky à l'élément <dt> avec une valeur top de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile.

dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}

Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici 7_sticky-positioning.html (voir le code source).

Résumé

Je suis sûr que vous avez eu du plaisir à jouer avec le positionnement de base ; bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, comme vous pouvez le voir il y a beaucoup de tâches pour lesquelles il est adapté.

 

Voir aussi

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab, Alan_Braut
Dernière mise à jour par : Dralyab,