La propriété top définit une partie de la position des éléments positionnés, elle n'a aucun effet pour les éléments non-positionnés.

/* Valeur de longueur */
/* Type <length> */
top: 3px;
top: 2.4em;

/* Valeur en pourcentages */
/* Relative à la hauteur du bloc englobant */
/* Type <percentages> */
top: 10%;

/* Avec un mot-clé */
top: auto;

/* Valeur globale */
top: inherit;
top: initial;
top: unset;

L'effet de la propriété top dépend de la façon dont l'élément est positionné (autrement dit, il dépend de la valeur de la propriété position) :

  • Pour les éléments qui sont positionnés de manière absolue (position: absolute ou position: fixed), cette propriété définit la distance entre le bord haut de la marge (margin) de l'élément et le bord haut du bloc englobant.
  • Lorsque position vaut relative, cela définit la grandeur du déplacement avec laquelle l'élément est placé en dessous de sa position normale.
  • Lorsque position vaut sticky, la propriété top se comporte comme avec relative lorsque l'élément se situe à l'intérieur de la zone d'affichage (viewport) et elle se comporte comme fixed lorsque l'élément est à l'extérieur de la zone d'affichage.
  • Lorsque position vaut static, la propriété top n'a aucun effet.

Lorsque top et bottom sont utilisés tous les deux, tant que height n'est pas définie ou ne vaut pas auto ou 100%, les distances introduites par top et bottom seront respectées. Sinon, si height est contrainte d'une certaine façon, la propriété top prendra le pas sur bottom qui sera ignorée.

Valeur initialeauto
Applicabilitééléments positionnés
Héritéenon
Pourcentagesse rapporte à la hauteur du bloc contenant
Médiavisuel
Valeur calculéesi spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, auto
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

<length>
Une valeur négative, nulle ou positive du type <length> qui représente :
  • La distance depuis le bord haut du bloc englobant pour les éléments positionnés de façon absolue
  • Le décalage avec lequel l'élément est déplacé vers le bas (relativement à sa position normale) pour les éléments positionnés de façon relative.
<percentage>
Une valeur du type <percentage> qui est relative à la hauteur du bloc englobant.
auto
Un mot-clé qui représente :
  • Pour les éléments positionnés de façon absolue, la position de l'élément en fonction de la propriété bottom et qui traite height: auto comme une hauteur basée sur le contenu.
  • Pour les éléments positionnés de façon relative, le décalage de l'élément par rapport à sa position originale, basée sur la propriété bottom. Si bottom vaut également auto, aucun décalage n'est appliqué.

Syntaxe formelle

<length> | <percentage> | auto

Exemples

Positionnement relatif

HTML

<div>
  <p>Lorem ipsum et tralala normal</p>
  <p class="relatif">Lorem ipsum et tralala relatif</p>
  <p>Lorem ipsum et tralala normal</p>
</div>

CSS

div {
  border: 2px black dashed;
} 

p.relatif {
  position: relative;
  top: 5em;
  border: 2px black solid
}

Résultat

Positionnement absolu

HTML

<div>
  <p>Lorem ipsum et tralala normal</p>
  <p class="absolu">Lorem ipsum et tralala absolu</p>
  <p>Lorem ipsum et tralala normal</p>
</div>

CSS

div {
  border: 2px black dashed;
}

p.absolu {
  position: absolute;
  top: 5em;
  border: 2px black solid;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Transitions
La définition de 'top' dans cette spécification.
Version de travail top peut désormais être animée.
CSS Positioned Layout Module Level 3
La définition de 'top' dans cette spécification.
Version de travail Description du comportement pour le positionnement adhérent (sticky)
CSS Level 2 (Revision 1)
La définition de 'top' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui15161
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple Oui Oui Oui4 Oui Oui Oui

1. In Internet Explorer versions before 7, when both top and bottom are specified, the element position is overconstrained and the top property has precedence; the computed value of bottom is set to -top, while its specified value is ignored.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB, ethertank, DavidWalsh
 Dernière mise à jour par : SphinxKnight,