top

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Exemple interactif

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 (il faut que le bloc englobant ait position: relative).
  • 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.

Syntaxe

css
/* 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. Si bottom vaut également auto, l'élément est positionné verticalement comme s'il avait été un élément statique.
  • 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é.

Définition formelle

Valeur initialeauto
Applicabilitééléments positionnés
Héritéenon
Pourcentagesse rapporte à la hauteur du bloc contenant
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() ;

Syntaxe formelle

top = 
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> =
<dashed-ident>

<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

Exemples

Positionnement relatif

HTML

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

css
div {
  border: 2px black dashed;
}

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

Résultat

Positionnement absolu

HTML

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

css
div {
  border: 2px black dashed;
}

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

Résultat

Spécifications

Specification
CSS Positioned Layout Module Level 3
# insets

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi