Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

La propriété position choisit des règles alternatives pour le positionnement des éléments. Elle a été élaborée pour les effets d'animation scriptés.

Valeur initialestatic
Applicabilitétous les éléments
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle
Crée un contexte d'empilementoui

Un élément positionné est un élément dont la propriété de position calculée est relativeabsolutefixed ou sticky.

Un élément positionné de façon relative est un élément dont la propriété de position calculée est relative.

Un élément positionné de façon absolue est un élément dont la propriété de position calculée est absolute ou fixed.

Un élément positionné en adhérence est un élément dont la propriété de position vaut {cssxref("sticky")}}.

Les propriétés top, right, bottom et left spécifient la position des éléments positionnés.

Syntaxe

/* Valeurs avec un mot-clé */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Valeurs globales*/
position: inherit;
position: initial;
position: unset;

Valeurs

static
Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés top, right, bottom, left et z-index ne s'appliquent pas.
relative
Ce mot-clé dispose tous les éléments comme s'ils n'étaient pas positionnés puis ajuste la position de l'élément, sans modifier la présentation (et laisse ainsi un espace où l'élément aurait du être s'il n'avait pas été positionné). L'effet de position: relative sur table-*-group, table-row, table-column, table-cell et table-caption n'est pas défini.
absolute
Ce mot-clé ne laisse pas d'espace pour l'élément. Au lieu de cela, il le positionne à la position spécifiée relative par rapport son plus proche ancêtre positionné ou au bloc englobant initial. Les boîtes positionnées de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.
fixed
Ce mot-clé ne laisse pas d'espace pour l'élément. Au lieu de cela, il le positionne à la position spécifiée, relative à la fenêtre d'affichage, ce qui empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour chaque page). Cette valeur crée toujours un nouveau contexte d'empilement. Lorsque la propriété transform d'un élément ancêtre est différente de none, c'est cet ancêtre qui est alors utilisé comme conteneur (plutôt que d'utiliser le viewport) (cf. la spécification sur les transformations CSS).
sticky
La position de la boîte est calculée en fonction des flux normaux (c'est-à-dire de la position dans le flux normal). Ensuite, la boîte est décalée par rapport à la racine de son flux et par rapport à son bloc contenant. Dans tous les cas, y compris avec les éléments table, cela n'affecte pas la position des boîtes subséquentes. Lorsqu'une boîte B est positionnée avec sticky, la position de la boîte suivante est calculée comme si B n'était pas décalée. L'effet de « position: sticky » sur les éléments table est le même que celui de «  position: relative ».

Syntaxe formelle

static | relative | absolute | sticky | fixed

Exemples

Positionnement relatif

HTML

<div class="box" id="un">Un</div>
<div class="box" id="deux">Deux</div>
<div class="box" id="trois">Trois</div>
<div class="box" id="quatre">Quatre</div>

CSS

.box { 
   display: inline-block; 
   background: red; 
   width: 100px; 
   height: 100px; 
   float: left; 
   margin: 20px; 
   color: white; 
}

#deux { 
   position: relative; 
   top: 20px; 
   left: 20px; 
}

Résultat

Dans cet exemple, on voit comment les autres éléments sont positionnés, comme si « Deux » prenait l'espace de sa position normale.

Positionnement absolu

Les éléments qui sont positionnés de façon relatives sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolu est positionné par rapport à son plus proche ancêtre positionné. S'il n'y a pas de tel ancêtre, c'est le conteneur initial qui est utilisé.

Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte « Trois » est positionnée de façon absolue par rapport à l'ancêtre immédiat (l'élément <body> de l'iframe générée ici) :

HTML

<div class="box" id="un">Un</div>
<div class="box" id="deux">Deux</div>
<div class="box" id="trois">Trois</div>
<div class="box" id="quatre">Quatre</div>

CSS

.box { 
   display: inline-block; 
   background: red; 
   width: 100px; 
   height: 100px; 
   float: left; 
   margin: 20px; 
   color: white; 
}

#trois { 
   position: absolute; 
   top: 20px; 
   left: 20px; 
}

Résultat

Positionnement fixe

Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bloc englobant correspond au viewport. On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page. Dans l'exemple qui suit, la boîte « Un » est fixée à 80 pixels du haut de la page et à 20 pixels du bord gauche.

HTML

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="un">Un</div>
</div>

CSS

.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  color: white;
}
#un {
  position: fixed;
  top: 80px;
  left: 10px;
}
.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

Résultat

Lorsqu'on regarde le haut de la page, la boîte apparaît en haut à gauche, même après avoir défilé, elle reste à la même place par rapport au viewport :

Positionnement adhérent

Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe. Par exemple :

#un {
  position: sticky;
  top: 10px;
}

se comportera comme un élément positionné de façon relative jusqu'à ce que le viewport défile au point où l'élément est à moins de 10 pixels du haut. Ensuite, il sera fixé à 10 pixels du haut, jusqu'à ce que le viewport redéfile jusqu'avant ce seuil.

Le positionnement adhérent est souvent utilisé pour gérer les niveaux de titre dans les listes alphabétiques. Le titre pour B apparaîtra sous les éléments commençant par A jusqu'à ce que ceux-ci disparaissent de l'écran. Plutôt que de défiler avec le reste de l'écran, la lettre B restera affichée en haut du viewport jusqu'à ce que tous les éléments commençant par B aient défilés sur l'écran (ce sera ensuite le tour de la lettre C et ainsi de suite).
 
Il faut définir un seuil avec au moins top ou right ou bottom ou left pour que le positionnement adhérent fonctionne comme attendu. Sinon, on ne pourra pas le distinguer du positionnement relatif.
 

HTML

<div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>

CSS

* {
  box-sizing: border-box;
}
dl {
  margin: 0;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  width: 99%;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC
}

Résultat

Notes

Pour les éléments positionnés de façon relative, les propriétés top ou bottom définissent l'écart vertical par rapport à la position normale. left ou right définissent l'écart horizontal.

Pour les éléments positionnés de façon absolue, les propriétés top, right, bottom et left définissent les décalages par rapport aux bords du bloc englobant (l'élément par rapport auquel l'élément courant est positionné de façon relative). Les marges de cet élément sont ensuite positionnéses dans depuis ces écarts.

La plupart du temps, les éléments positionnés de façon absolue ont les valeurs de height et width calculées avec auto afin d'être ajustés à l'élément. Toutefois, les éléments non-replacés positionnés de façon absolue peuvent être construit afin de remplir l'espace disponible en définissant (autrement qu'avec auto) top et bottom et en laissant height non défini (qui vaudra alors auto). De la même façon, on peut utiliser left, right et width.

  • Si top et bottom sont spécifiés (autrement dit, d'un point de vue technique, ils n'ont pas les valeurs auto), ce sera top qui prendra la priorité.
  • Si left et right sont spécifiés, left prendra la priorité lorsque direction vaudra ltr (anglais, japonais horizontal, français, etc.) et right prendra la priorité lorsque direction vaudra rtl (perse, arabe, hébreux, etc.).

Spécifications

Spécification État Commentaires
CSS Level 2 (Revision 1)
La définition de 'position' dans cette spécification.
Recommendation  
CSS Positioned Layout Module Level 3
La définition de 'position' dans cette spécification.
Version de travail Ajout de la valeur sticky

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.0) [1] 4.0 [3] 4.0 1.0 (85)
fixed 1.0 1.0 (1.0) [5] 7.0 4.0 1.0 (85)
sticky Pas de support [4] 32 (32.0) [2] Pas de support [6] Pas de support 6.1 -webkit-
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? 1.0 (1.0) [1] ? ? 7.0 -webkit-

[1] Depuis Firefox 30, Gecko permet aux éléments <tr>, <thead> et  <tfoot> mis en forme avec position: relative; style d'être considérés comme des conteneurs pour le positionnement absolu. Cela signifie qu'un élément mis en forme avec position: absolute; dans un tableau pourra être positionné de façon relative à ces éléments. Dans les autres navigateurs et dans les anciennes versions de Firefox,  position: relative; sur une ligne ou un groupe de ligne n'avait aucun effet. Afin d'aider les développeurs à migrer vers ce nouveau fonctionnement et de détecter les éventuels problèmes, Firefox affiche un avertissement dans la console si cette fonctionnalité est utilisée.

[2] Le positionnement adhérent ne fonctionnait, entre Firefox 26 et Firefox 31 inclus, que lorsque la préférence layout.css.sticky.enabled était activée avec true avec about:config. Pour Firefox entre les versions 27 et 31, cette valeur était la valeur par défaut pour les versions Nightly et Aurora. Cette préférence a été retirée à partir de Firefox 48.

[3] Avec Internet Explorer, le positionnement fixe ne fonctionne pas si le document est en mode quirks.

[4] Le support du positionnemnt adhérent a été retiré de Chrome 23 mais il pourrait être supporté à nouveau.

[5] Avant Firefox 44, position: fixed ne créait pas de contexte d'empilement dans la plupart des cas. La spécification et l'implémentation de Gecko ont été modifiées afin de suivre le comportement de Chrome et Safari.

[6] Le positionnement adhérent est à l'étude pour Microsoft Edge

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Machou, adaedra, fscholz, Sebastianz, cconcolato, FredB, teoli, Mgjbot, Fredchat, Kyodev
 Dernière mise à jour par : SphinxKnight,