Order - Propriété CSS

Description de la propriété order.

order définit la position d'un élément dans un conteneur flex ou une grille. Il est ainsi possible de positionner les éléments indifféremment de leur ordre dans le document.

Si plusieurs éléments ont la même valeur pour order, ils seront affichés dans l'ordre du document (le code HMTL).

Il faut garder à l'esprit que d'autres propriétés ont un impact sur l'ordre d'affichage des éléments : flex-direction, flex-wrap, etc.

Cas des conteneur flex.

Dans le cas d'un conteneur flex, il ne peut pas y avoir superposition d'éléments, order dans ce cas ne gère que l'ordre d'affichage. Les valeurs pour order sont inscrites dans chacun des éléments.

Cas des conteneurs grille.

Dans le cas des conteneurs grille, order ne doit être utilisé que en cas de chevauchement de plusieurs cellules, pour déterminer laquelle sera affichée au dessus, ou lorsque l'ordre d'affichage doit être différent de l'ordre dans le document HTML. Dans la plupart des cas, il est préférable de réorganiser le document HTML.

Dans l'exemple ci-dessous, nous avons un grille dont tous les éléments couvrent 2 lignes et 2 colones. L'un des éléments étant placé au centre, il empiète sur les autres cellules. Dans le premier cas de figure (order:0) il se retrouve derrière les autres cellules, dans le deuxième cas (order:5) il est devant. Le numéro d'ordre des éléments est inscrit dessus.

Note : la propriété a un effet visuellement comparable à order, mais elle crée un plus un contexte d'empilement.

Valeurs pour order.

• order: 3;

  L'élément est placé après les éléments portant order:1 et order:2, et avant les éléments portant un numéro supérieur à 3. Par rapport aux éléments order:3 l'ordre est déterminé en fonction de l'apparition dans le code HTML.

  order attend une valeur numérique positive, nulle ou négative, sans unité.

  La valeur par défaut est 0.

• order: initial; (0) order: inherit; order: revert; order: revertLayer; order: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété order.

L'effet visuel ci-dessous a été obtenu en animant la propriété order. Pour que l'élément qui reçoit l'animation (le premier) parcourt bien toute la suite des autres éléments, il a fallu attribuer à chacun des autres éléments une valeur différente pour order. En effet la valeur par défaut de order est 0 ; si tous les éléments ont cette valeur identique, l'élément mobile ne pourra pas s'insérer entre chacun d'eux.

Quant à l'effet de retour rapide au départ, il a été obtenu en arrêtant l'animation à 90%, avec une étape supplémentaire pour redonner sa valeur de départ à order sur les 10% de temps restants.

Simulateur avec la propriété order.

Le simulateur ci-dessous modifie la propriété order de l'élément rouge. La valeur order de chacun des autres éléments est affichée. L'élément rouge apparaît en troisième position dans le code HTML.

Prise en charge de order par les navigateurs.

Tout est vert : aucun problème de compatibilité à signaler.

1

Propriété
order

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété order.

• Module CSS - Mise en page par flex-box - Niveau 1

  Concernant order. Définition de la propriété order dans le cadre d'un flex-box.
  

  23 Juillet 2009

  Document de travail.

  

  18 Septembre 2012

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 1

  Cette spécification définit comment réaliser des mises en page sous frome de grilles, composées de lignes et de colonnes, avec une structure du document qui reste très simple : un conteneur et autant d'éléments que de cellules. Beaucoup plus simple en tout cas que les tableaux.
  Chacune des cellules peut être alignée horizontalement dans le largeur des colonnes, ou verticalement dans la hauteur des lignes. Elles peuvent aussi être réparties ou agrandies pour couvrir toute la place disponible. Le contenu de chacune des cellules peut être aligné horizontalement et verticalement.
  Une nouvelle unité (fr) est disponible pour dimensionner les colonnes ou les lignes.

  Concernant order. Définition de la propriété order dans le cas d'un conteneur grille.
  

  07 Avril 2011

  Document de travail.

  

  29 Septembre 2016

  Candidat à la recommandation.

  

  

• Module CSS - Affichage - Niveau 3

  Concernant order. Description de la propriété order.
  

  20 Février 2014

  Document de travail.

  

  28 Août 2018

  Candidat à la recommandation.

  

  

Voir aussi, à propos des flex-box.

Les spécificités des flex-box sont décrites dans le module Module CSS - Mise en page par flex-box. La propriété order y figure, ainsi que toutes celles qui sont listée ci-dessous.

Propriétés :