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

top: 0;

top: 4em;

top: 10%;

top: 20px;

<section>  <div>    <div>I am absolutely positioned.</div>    <p>      As much mud in the streets as if the waters had but newly retired from the      face of the earth, and it would not be wonderful to meet a Megalosaurus,      forty feet long or so, waddling like an elephantine lizard up Holborn      Hill.    </p>  </div></section>

.example-container {  border: 0.75em solid;  padding: 0.75em;  text-align: left;  position: relative;  width: 100%;  min-height: 200px;}#example-element {  background-color: #264653;  border: 4px solid #ffb500;  color: white;  position: absolute;  width: 140px;  height: 60px;}

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 ouposition: 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 aitposition: relative).
• Lorsqueposition vautrelative, cela définit la grandeur du déplacement avec laquelle l'élément est placé en dessous de sa position normale.
• Lorsqueposition vautsticky, la propriététop se comporte comme avecrelative lorsque l'élément se situe à l'intérieur de la zone d'affichage (viewport) et elle se comporte commefixed lorsque l'élément est à l'extérieur de la zone d'affichage.
• Lorsqueposition vautstatic, la propriététop n'a aucun effet.

Lorsquetop etbottom sont utilisés tous les deux, tant queheight n'est pas définie ou ne vaut pasauto ou100%, les distances introduites partop etbottom seront respectées. Sinon, siheight est contrainte d'une certaine façon, la propriététop prendra le pas surbottom 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) pourles é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 traiteheight: auto comme une hauteur basée sur le contenu. Sibottom vaut égalementauto, 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. Sibottom vaut égalementauto, aucun décalage n'est appliqué.

Définition formelle

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

<div>  <p>Lorem ipsum et tralala normal</p>  <p>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>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

Voir aussi

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