Top, right, bottom, left et inset : propriétés CSS.

Top, right, bottom, left.

Ces quatre propriétés définissent l'emplacement d'un élément dans le cas où cet élément est positionné. Un élément est dit "positionné" lorsqu'il est sorti de la séquence normale d'affichage, c'est à dire lorsque sa propriété position a une valeur différente de static (voir la propriété position).

• position:static : les 4 propriétés top, right, bottom et left n'ont aucun effet. La position de l'élément est déterminée par son ordre d'apparition dans le code et par ses marges.
• position:absolute : les 4 propriétés définissent la position de l'élément par rapport au dernier parent positionné.
• position:fixed : les 4 propriétés définissent la position de l'élément par rapport à la fenêtre du navigateur (viewport).
• position:relative : Les 4 propriétés définissent la position de l'élément par rapport à l'emplacement qu'il aurait eu s'il n'était pas positionné.
• position:sticky : les 4 propriétés se comportent comme si la position était relative tant que l'élément est dans le viewport et comme si la position était fixed quand l'élément atteint le bord du viewport pendant un défilement de la page. Autrement dit, les éléments sticky restent toujours visibles sur l'écran.

Top, right, bottom et left définissent l'espace entre le bord de l'élément de référence 'ou du viewport) et la marge correspondante de l'élément positionné, comme le montre le schéma ci-dessous :

Les deux propriétés qui agissent dans la même direction (left et right par exemple) peuvent donc entrer en conflit. Voici comment celui-ci est résolu :

• Si left et right sont fixées et que la largeur de l'élément (width) est libre, l'élément est dimensionné pour satisfaire à la fois les valeurs données à left et à right.
• Si left et right sont fixées et que la largeur de l'élément est fixée également, la propriété right est ignorée.

On trouve une règle comparable dans le sens vertical :

• Si top et bottom sont fixées et que la hauteur de l'élément est libre, l'élément est dimensionné pour satisfaire les valeurs données à top et à bottom.
• Si top et bottom sont fixées et que la hauteur de l'élément est également imposée par la propriété height, la valeur de bottom est ignorée.

La propriété résumée inset.

Une propriété permettant de définir en une seule écriture les quatre valeurs de positionnement a été définie : inset. Sa dénomination ne correspondant pas aux habitudes de CSS, le nom d'une propriété résumée étant généralement la racine du nom des propriétés regroupées. Margin par exemple est la propriété résumée pour margin-top, margin-right, margin-bottom et margin-left.
Les propriétés top, right, bottom et left n'ayant aucune partie commune dans leur nom, la règle habituelle n'a pas pu être appliquée.

Mais ce qui est encore plus bizarre c'est que des propriétés dont le nom commence par inset ont été également définies mais ce sont des propriétés logiques, c'est à dire qui agissent en fonction du mode d'écriture de la langue (voir ci-dessous).

Reportez-vous à la description de la propriété inset pour plus de détails.

Prise en charge de la langue.

Lorsque le positionnement de l'élément doit se faire en fonction de la langue, on utilisera plutôt les propriétés logiques suivantes :

• inset-block-start : équivalent à top pour les langues latines.
• inset-inline-start : équivalent à left pour les langues latines.
• inset-block-end : équivalent à bottom pour les langues latines.
• inset-inline-end : équivalent à right pour les langues latines.

Attention ! Il existe également une propriété inset mais qui n'est pas la propriété résumée de quatre ci-dessus car il s'agit d'une propriété physique, et non pas logique.

Syntaxes pour top,right,bottom et left.

• top: auto; right: auto; bottom: auto; left: auto;

  Le navigateur détermine lui-même l'emplacement de l'élément. En général, l'élément reste à la position qu'il aurait eue en mode static.

• top: 10px; right: 10px; bottom: 10px; left: 10px;

  L'emplacement de l'élément est fixé en fonction des valeurs indiquées. Il n'est pas du tout indispensable de définir une valeur pour les quatre propriétés.

  La valeur peut être positive ou négative, dans la mesure où cela ne conduit pas à une impossibilité. Elle doit être suivie d'une unité de dimension (voir les unités de dimension).

  Les pourcentages sont évalués par rapport aux dimensions du bloc parent.
  Les pourcentages sur left et right sont évalués par rapport à sa largeur,
  ceux sur top et bottom par rapport à sa hauteur.

• top: initial; (auto) top: inherit; top: revert; top: revertLayer; top: unset;

  right: initial; (auto) right: inherit; right: revert; right: revertLayer; right: unset;

  bottom: initial; (auto) bottom: inherit; bottom: revert; bottom: revertLayer; bottom: unset;

  left: initial; (auto) left: inherit; left: revert; left: revertLayer; left: unset;

  inset: initial; (auto) inset: inherit; inset: revert; inset: revertLayer; inset: unset;

  Pour plus d'informations, reportez-vous aux pages de présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Simulateur avec ces quatre propriétés.

Le simulateur agit sur l'élément bleu que vous devez voir en haut à gauche de l'écran. Sa position a été définie sur fixed et ses dimensions (largeur et hauteur) ne sont pas fixées. En modifiant les valeurs pour les propriétés de positionnement ci-dessous, vous verrez l'élément se déplacer sur l'écran, et éventuellement changer de dimensions.

Compatibilité.

Les quatre propriétés physiques sont correctement traitées par tous les navigateurs. Leurs équivalents logiques ne sont pas reconnus par Internet Explorer  , mais ce navigateur n'est plus utilisé.

1

Propriétés
top bottom
right left

2

Propriétés
inset...

Estimation de la prise en charge globale.

96%

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

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

Caniuse

Caniuse

Historique des propriétés top, right, bottom et left.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Introduction de la possibilité de positionner un élément (propriété position) et des propriétés définissant sa position : top, right, bottom et left.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Propriétés et valeurs logiques - Niveau 1

  Introduction des propriétés logiques inset... pour positionner un élément en prenant en compte le mode d'écriture de la langue utilisée.
  

  18 Mai 2017

  Document de travail.

  

  

  

• Module CSS - Éléments positionnés - Niveau 3

  Pas de changements concernant ces propriétés.
  

  07 Février 2012

  Document de travail.

  

  

  

Voir aussi, à propos du positionnement.

Les propriétés en rapport avec la positionnement (différent de static) sont regroupées dans le module CSS Positioned Layout Module. Les propriétés suivantes sont également décrites dans ce même module :

Propriétés :