Top, right, bottom, left et inset : propriétés CSS.
Résumé des caractéristiques de la propriété top
auto
auto
top
passe progressivement d'une valeur à une autre.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éstop
,right
,bottom
etleft
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 étaitrelative
tant que l'élément est dans le viewport et comme si la position étaitfixed
quand l'élément atteint le bord du viewport pendant un défilement de la page. Autrement dit, les élémentssticky
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
etright
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
etright
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
etbottom
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
etbottom
sont fixées et que la hauteur de l'élément est également imposée par la propriétéheight
, la valeur debottom
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
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 surleft
etright
sont évalués par rapport à sa largeur,
ceux surtop
etbottom
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.
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
, mais ce navigateur n'est plus utilisé.top
, right
, bottom
et left
.inset
) qui prennent en compte le mode d'écriture en fonction de la langue du texte. top bottom
right left
inset...
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
.
-
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
etleft
.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Propriétés et valeurs logiques - Niveau 1
Introduction des propriétés logiquesinset...
pour positionner un élément en prenant en compte le mode d'écriture de la langue utilisée.18 Mai 2017Document de travail. -
Module CSS - Éléments positionnés - Niveau 3
Pas de changements concernant ces propriétés.07 Février 2012Document 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 :