Top - Propriété CSS

Cette page concerne aussi les propriété(s) physique(s) :
- 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.
- bottom
Définit l'espace entre le bas de l'élément (s'il est positionné) et le bas de son parent.
- 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.
- inset
Définit la position de l'élément lorsque celui-ci est positionné autrement qu'en statique. Raccourci pour top, right, bottom et left.
Et les propriétés logiques :
- 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-block-end
Pour un élément positionné, définit l'emplacement du côté fin de block.
- inset-inline-start
Pour un élément positionné, définit l'emplacement du côté début de ligne.
- inset-block
Définit l'emplacement d'un élément positionné, dans la direction des blocs. Raccourci pour inset-block-start et inset-block-end.
- inset-inline
Définit l'emplacement d'un élément positionné dans la direction des lignes. Raccourci pour inset-inline-start et inset-inline-end.
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.
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.
Ordre canonique
Single : valeur unique (l'ordre n'intervient pas).
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)

Description de top, right, bottom et 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 quatre 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 quatre propriétés définissent la position de l'élément par rapport au dernier parent positionné.
position: fixed :
Les quatre propriétés définissent la position de l'élément par rapport à la fenêtre du navigateur (viewport).
position: relative :
Les quatre 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 quatre 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 :

Dernier élément positionné ou viewport
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 auto, 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 auto, 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.

Et les deux propriétés résumées suivantes :

  • inset-block : propriété résumée pour inset-block-start et inset-block-end.
  • inset-inline : propriété résumée pour inset-inline-start et inset-inline-end.

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;

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

Animation de top, right, bottom et left.

Ces quatre propriétés sont fréquemment utilisées dans des animations. Celles-ci sont très fluides (animation d'une dimension en pixels).
Sur notre exemple, l'élément est positionné en relative, et les propriété left et top sont animées.

Simulateur avec ces quatre propriétés.

Le simulateur agit sur l'élément bleu dont la position a été définie sur absolute et ses dimensions (largeur et hauteur) sont auto. Son parent a une position relative sans indications particulière de positionnement. 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. Il peut bien sûr sembler quitter son parent mais celui-ci reste toujours la référence pour le positionnement.

top :
right :
bottom :
left :
Parent, positionné en relative.
Élément positionné en fixe
position:absolute
(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 par les navigateurs de la propriété résumé inset qui définit la position pour les éléments positionné (dont la propriété position est différente de statique).
Colonne 3
Prise en charge par les navigateurs des propriétés logiques inset-block-start, inset-block-end, inset-inline-start et inset-inline-end.
1
Propriétés
top bottom
right left
2
Propriété
inset
 
3
Propriétés logiques
inset...
 
Estimation de la prise en charge globale.
98%
97%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Safari sur IOS

Chrome

Edge

Firefox

Opéra

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
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

    Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

    Concernant top. 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.
    WD
    04 Novembre 1997
    Document de travail.
    PR
    24 Mars 1998
    Proposé à la recommandation.
    REC
    11 Mai 1998
    Recommandation.

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

    Concernant top. 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.
    WD
    18 Mai 2017
    Document de travail.
    CR
    PR
    REC

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

    Concernant top. Pas de changements concernant ces propriétés.
    WD
    07 Février 2012
    Document de travail.
    CR
    PR
    REC

Voir aussi, à propos du positionnement.

Les propriétés en rapport avec la positionnement (différent de static) sont regroupées dans le module Module CSS - Éléments positionnés. 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. Raccourci pour top, right, bottom et left.
inset-block
Définit l'emplacement d'un élément positionné, dans la direction des blocs. Raccourci pour inset-block-start et inset-block-end.
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
Définit l'emplacement d'un élément positionné dans la direction des lignes. Raccourci pour inset-inline-start et inset-inline-end.
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.
⚠
overlay
Détermine si un élément positionné doit être affiché au dessus des autres.
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.
Top
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).
z-index
Définit sur quelle couche un élément doit s'afficher (dessus, dessous). Surtout utile pour des éléments positionnés.