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

top
right
bottom
left
inset

Résumé des caractéristiques de la propriété top

Description rapide
Pour un élément positionné, définit l'espace entre le haut de l'élément et le haut de l'élément de référence (parent positionné ou viewport).
Statut
Standard
S'applique à
Éléments positionnés (en absolu, en relatif, etc.).
Utilisable sur
HTML
Valeurs prédéfinies
auto
Pourcentages
Calculés par rapport à la hauteur du bloc de référence.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété top passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Éléments positionnés
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)

Statut du document: WD (document de travail)

Statut du document: REC (recommandation)

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 :

Propriétés CSS top, right, bottom et left

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.

   

top
left
La direction et le sens d'écriture de ce texte s'adaptent à la langue choisie.
right
bottom

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.

top :
right :
bottom :
left :
Élément positionné en fixe
position:fixed
(pour simulateur)

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é.

Colonne 1
Prise en charge des propriétés physiques (qui ne tiennent pas compte de la langue et du mode d'écriture) : top, right, bottom et left.
Colonne 2
Prise en charge des propriétés logiques (dont le nom commence par inset) qui prennent en compte le mode d'écriture en fonction de la langue du texte.
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

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

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 :

bottom
Définit l'espace entre le bas de l'élément (s'il est positionné) et le bas de son parent.
inset
Définit la position de l'élément lorsque celui-ci est positionné autrement qu'en statique.
inset-block-end
Pour un élément positionné, définit l'emplacement du côté fin de block.
inset-block-start
Pour un élément positionné, définit l'emplacement du bord coté début de block.
inset-inline-end
Sur un élément positionné, définit l'emplacement du bord situé en fin de ligne.
inset-inline-start
Pour un élément positionné, définit l'emplacement du côté début de ligne.
left
Pour un élément positionné, définit l'espace entre le bord gauche de l'élément et le bord gauche de l'élément de référence.
position
Change le positionnement d'un élément, pour le rendre par exemple fixe par rapport à la page.
right
Pour un élément positionné, définit l'espace entre le bord droit de l'élément et le bord droit de l'élément de référence.
z-index
Définit sur quelle couche un élément doit s'afficher (dessus, dessous). Surtout utile pour des éléments positionnés.