Les propriétés Top, Right, Bottom et Left
inset-block-start, inset-inline-end, inset-block-end, inset-inline-start
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és 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 parent
de référence 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.
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
inset-inline-start
inset-block-end
inset-inline-end
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 CSS 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. La valeur initiale est :
.auto
Simulateur.
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
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é.inset
) qui prennent en compte la direction et le sens 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 :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que top
.
Les spécifications CSS éditées par le W3C sont organisées en modules. top
fait partie du Module CSS - Éléments positionnés (CSS Positioned Layout Module). Les définitions suivantes sont également décrites dans ce même module.