top

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.

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

Compatibilité des navigateurs

[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

• bottom
• height
• left
• right
• Les bases de CSS : la disposition et le positionnement