Aller au contenu

Positionnement

Le positionnement contrôle l'emplacement d'un élément par rapport à sa place normale dans le document, à son parent ou à la fenêtre du navigateur. Le Style Manager expose tous les modes de positionnement CSS pour que vous puissiez sortir des éléments du flux normal quand c'est nécessaire.

Deux points à garder à l'esprit :

  • Le flux normal gère la plupart des mises en page. Vous n'avez besoin du positionnement que pour les superpositions, les en-têtes collants, les badges et les autres éléments qui doivent sortir de l'ordre d'empilement habituel.
  • Un élément positionné a besoin d'un ancêtre positionné. Le positionnement absolu remonte l'arborescence à la recherche du parent le plus proche dont la Position n'est pas static. S'il n'en trouve aucun, il utilise la page elle-même.

Comment fonctionne le flux normal

Par défaut, chaque élément suit Position : static. Les éléments s'empilent de haut en bas dans l'ordre où ils apparaissent dans le HTML. Les propriétés de décalage (Top, Right, Bottom, Left) n'ont aucun effet sur les éléments statiques.

Si vos besoins de mise en page consistent à disposer des éléments côte à côte ou à répartir l'espace, utilisez Flexbox plutôt que le positionnement.

Décaler un élément avec le positionnement relatif

Définissez Position sur relative et l'élément reste à sa place normale dans le flux, mais vous pouvez le décaler visuellement avec Top, Right, Bottom et Left. L'espace qu'il occupait initialement est préservé -- les autres éléments ne se déplacent pas pour combler le vide.

Unités de décalage disponibles dans Silex : px, %, em, rem, vh, dvh, vw, dvw, cqi, cqb, cqw, cqh, cqmin, cqmax.

Quand l'utiliser : Petits ajustements visuels (décaler une icône de 2px vers le haut pour l'aligner avec le texte), ou établir un contexte de positionnement pour des enfants positionnés en absolu.

Sortir un élément du flux avec le positionnement absolu

Définissez Position sur absolute et l'élément quitte entièrement le flux normal. Il est placé par rapport à son ancêtre le plus proche dont la Position est définie sur une valeur autre que static. Si aucun ancêtre de ce type n'existe, il se positionne par rapport au corps de la page.

  1. Sélectionnez l'élément parent et définissez sa Position sur relative (c'est l'ancre).
  2. Sélectionnez l'élément enfant et définissez sa Position sur absolute.
  3. Utilisez Top, Right, Bottom, Left pour le placer précisément.

Quand l'utiliser : Badges sur les cartes, boutons de fermeture sur les modales, éléments décoratifs chevauchant le contenu.

Erreur courante : Oublier de définir le parent sur relative. L'enfant saute au niveau de la page et vous ne comprenez pas pourquoi.

Fixer un élément au viewport avec le positionnement fixe

Définissez Position sur fixed et l'élément est retiré du flux et positionné par rapport au viewport du navigateur. Il reste en place quand l'utilisateur fait défiler la page.

Quand l'utiliser : Barres de navigation persistantes, boutons d'action flottants, bannières de cookies.

Attention : Les éléments fixes peuvent recouvrir le contenu en dessous. Donnez au corps de la page suffisamment de padding supérieur (ou de margin) pour compenser la hauteur d'un en-tête fixe.

Coller un élément pendant le défilement

Définissez Position sur sticky et l'élément se comporte comme relative jusqu'à ce que l'utilisateur dépasse un seuil que vous définissez avec Top (le plus souvent). Une fois le seuil atteint, l'élément se « colle » en place comme un élément fixe -- mais uniquement à l'intérieur de son conteneur parent. Quand le parent sort de la vue en défilant, l'élément collant part avec lui.

  1. Sélectionnez l'élément.
  2. Définissez Position sur sticky.
  3. Définissez Top sur 0px (ou le décalage souhaité par rapport au bord du viewport).

Quand l'utiliser : En-têtes de section dans une longue liste, barre latérale qui suit le défilement mais s'arrête au pied de page.

Erreur courante : Le parent a Overflow défini sur hidden ou auto. Le positionnement collant exige que le parent permette le débordement visible dans la direction du défilement.

Contrôler l'ordre d'empilement avec z-index

Quand des éléments se chevauchent (à cause du positionnement absolu, fixe ou collant, ou de marges négatives), Z-index détermine lequel apparaît au-dessus. Les nombres plus élevés sont plus proches du spectateur. La valeur par défaut est auto (effectivement 0).

Z-index ne fonctionne que sur les éléments positionnés (tout sauf static) ou les enfants flex/grid. Dans Silex, c'est un curseur allant de -10000 à 10000.

Valeurs fixes : auto, unset, initial, inherit, revert.

Conseil : Utilisez des valeurs petites et prévisibles. Un schéma courant : contenu à 1, menus déroulants à 10, modales à 100, infobulles à 1000. Sauter directement à 9999 rend la gestion future des couches plus difficile.

Contrôler le débordement

Overflow détermine ce qui se passe quand le contenu est plus grand que son conteneur. Dans Silex, la propriété est divisée en deux sous-propriétés :

  • Overflow X (horizontal) : auto, hidden, visible, scroll, inherit, initial, unset
  • Overflow Y (vertical) : mêmes valeurs
Valeur Comportement
visible (par défaut) Le contenu déborde de la boîte. Aucun recadrage.
hidden Le contenu est recadré. Aucune barre de défilement.
scroll Le contenu est recadré. Les barres de défilement s'affichent toujours.
auto Les barres de défilement n'apparaissent que quand le contenu déborde.

Quand l'utiliser : Masquer les éléments décoratifs qui débordent, créer des panneaux défilants ou empêcher les décalages de mise en page causés par un texte long. N'oubliez pas que overflow: hidden sur un parent empêchera position: sticky de fonctionner sur ses enfants.

Contrôler la visibilité

Visibility masque un élément visuellement tout en conservant son espace dans la mise en page. Valeurs : visible, hidden, collapse, inherit, initial, unset.

C'est différent de Display none (qui retire l'élément du flux entièrement). Utilisez Visibility hidden quand vous devez réserver l'espace de l'élément sans l'afficher -- par exemple, masquer une colonne dans un tableau sans effondrer la mise en page.

Exemples pratiques

Barre de navigation collante : 1. Sélectionnez la section de navigation. 2. Position : sticky, Top : 0px. 3. Z-index : 10 pour qu'elle reste au-dessus du contenu de la page.

Badge sur une carte : 1. Sélectionnez le conteneur de la carte. Position : relative. 2. Ajoutez un petit élément texte à l'intérieur. Position : absolute, Top : -8px, Right : -8px. 3. Stylisez le badge avec une couleur de fond et un border radius.

Superposition plein écran : 1. Ajoutez un Div pour la superposition. Position : fixed, Top : 0, Right : 0, Bottom : 0, Left : 0. 2. Z-index : 100. 3. Couleur de fond avec une certaine opacité pour un effet d'assombrissement.

Erreurs courantes

  • Utiliser le positionnement absolu pour la mise en page. Si vous vous retrouvez à positionner chaque élément en absolu, passez à Flexbox. Les éléments absolus ne réagissent pas aux éléments voisins.
  • Oublier le contexte de positionnement. Un élément positionné en absolu cherche l'ancêtre non-statique le plus proche. Aucun ancêtre ? Il utilise la page.
  • Guerre des z-index. Ajouter des valeurs de z-index toujours plus grandes parce que les éléments continuent d'apparaître derrière d'autres. Prenez du recul et planifiez vos couches d'empilement.
  • Overflow hidden qui casse le sticky. Un parent avec overflow hidden ou auto empêche le positionnement collant de fonctionner.

En savoir plus

Avancé : requêtes de conteneur et éléments positionnés

Container Type

Silex prend en charge Container-type sur les éléments, avec les valeurs normal, size et inline-size. Quand vous définissez un élément comme conteneur de requête, ses descendants peuvent utiliser les unités de requête de conteneur pour leurs décalages : cqi, cqb, cqw, cqh, cqmin, cqmax. C'est utile pour positionner des éléments par rapport à la taille de leur conteneur plutôt que du viewport.

Unités dynamiques du viewport

Les propriétés de décalage prennent en charge dvh (hauteur dynamique du viewport) et dvw (largeur dynamique du viewport) en plus des standards vh/vw. Les unités dynamiques tiennent compte du chrome des navigateurs mobiles qui apparaît et disparaît pendant le défilement, offrant un positionnement plus précis sur les appareils mobiles.

Les mots-clés inherit, initial et unset

Chaque propriété de positionnement accepte inherit (utiliser la valeur du parent), initial (utiliser la valeur CSS par défaut) et unset (hériter si la propriété hérite naturellement, sinon utiliser initial). Ils sont utiles pour surcharger les styles à différents points de rupture.

Référence : toutes les propriétés de positionnement
Propriété Type Valeurs / Unités MDN
Position sélection static, relative, absolute, fixed, sticky, inherit, initial, unset lien
Top nombre px, %, em, rem, vh, dvh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax lien
Bottom nombre px, %, em, rem, vh, dvh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax lien
Right nombre px, %, em, rem, vh, vw, dvw, cqi, cqb, cqw, cqh, cqmin, cqmax lien
Left nombre px, %, em, rem, vh, vw, dvw, cqi, cqb, cqw, cqh, cqmin, cqmax lien
Z-index curseur -10000 à 10000, auto, unset, initial, inherit, revert lien
Overflow X sélection auto, hidden, visible, scroll, inherit, initial, unset lien
Overflow Y sélection auto, hidden, visible, scroll, inherit, initial, unset lien
Visibility sélection visible, hidden, collapse, inherit, initial, unset lien
Display sélection block, inline, inline-block, flex, grid, inline-flex, none, inherit, initial, unset lien
Container-type sélection normal, size, inline-size lien

Quiz

Q1 : Vous voulez qu'un badge de notification se place dans le coin supérieur droit d'une carte. Que définissez-vous sur la carte et le badge ?

  • A) Carte : Position absolute. Badge : Position relative.
  • B) Carte : Position relative. Badge : Position absolute, Top 0, Right 0.
  • C) Carte : Position static. Badge : Position fixed, Top 0, Right 0.
Réponse

B) Carte : Position relative. Badge : Position absolute, Top 0, Right 0. -- La carte devient le contexte de positionnement. Le badge est sorti du flux et placé dans le coin supérieur droit de la carte.

Q2 : Votre en-tête collant cesse de coller quand vous faites défiler la page. Quelle est la cause la plus probable ?

  • A) Le Z-index est trop bas.
  • B) Un élément parent a Overflow défini sur hidden ou auto.
  • C) Vous avez oublié de définir Position sur relative sur le parent.
Réponse

B) Un élément parent a Overflow défini sur hidden ou auto. -- Le positionnement collant exige que le overflow du parent soit visible dans la direction du défilement. Overflow hidden ou auto crée un nouveau contexte de défilement qui empêche le sticky de fonctionner comme prévu.

Q3 : Vous avez défini un élément avec Position absolute mais il saute en haut à gauche de toute la page au lieu de son conteneur parent. Pourquoi ?

  • A) Le z-index est incorrect.
  • B) Aucun ancêtre n'a une valeur de Position non-statique.
  • C) L'élément a besoin de Display block.
Réponse

B) Aucun ancêtre n'a une valeur de Position non-statique. -- Le positionnement absolu cherche l'ancêtre positionné le plus proche. Si chaque ancêtre est static (la valeur par défaut), l'élément se positionne par rapport au corps de la page. Définissez le parent souhaité avec Position relative.

Q4 : Vous voulez qu'un élément soit invisible mais conserve son espace dans la mise en page. Quelle approche utilisez-vous ?

  • A) Display none
  • B) Visibility hidden
  • C) Position absolute avec Left -9999px
Réponse

B) Visibility hidden -- Cela masque l'élément visuellement tout en préservant son espace dans le flux du document. Display none le retire entièrement du flux.

Éditer cette page sur GitLab