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.

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.

Pour les éléments positionnés de manière relative (position: relative), cela définit la grandeur du déplacement avec laquelle l'élément est placé en dessous de sa position normale.

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
Animableoui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* 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;

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 Statut Commentaires
CSS Transitions
La définition de 'top' dans cette spécification.
Version de travail top peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'top' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) 1.0 (1.7 ou moins) (Oui)[1] (Oui) (Oui)
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? ? ? ?[1] ? ?

[1] Pour les versions d'Internet Explorer antérieures à la version 7.0, lorsque top et bottom étaient spécifiés, la position de l'élément était sur-contrainte et la propriété top avait la priorité : la valeur calculée de bottom était alors -top alors que la valeur spécifiée était ignorée.

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,