Attribut TOP

Rôle

L’attribut top permet de positionner, à partir du haut, un élément qui échappe au flux HTML (disposition par défaut des éléments). Il peut être conjointement utilisé avec 3 autres attributs : left (à partir de la gauche), right (à partir de la droite), bottom (à partir du bas).

Si la valeur de l’attribut position est « absolute », le haut correspond au bord supérieur du premier élément parent qui est aussi en position, ou le cas échéant, du bord supérieur de la fenêtre du navigateur.

Si la valeur de l’attribut position est « fixed », le haut correspond au bord supérieur de la fenêtre du navigateur.

Si la valeur de l’attribut position est « relative », le haut correspond au bord supérieur de l’élément lui-même.

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.top

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

#ct{
  width: 300px;
  height: 200px;
  border: thin solid red ;
  position : relative;
}
#droite{
  background-color: orange;
  border: thin solid blue ;
  position: absolute;
  width: 100px;
  margin: 10px;
  top: 0;
  right: 0;
}

– Le code HTML

<div id="ct">
  <p> Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. </p>
  <p> Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. </p>
  <p> Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. </p>
  <div id="droite">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

Résultat

Le référentiel top du bloc en position « absolute » (bordure bleu) est le bord supérieur du bloc en position relative (bordure rouge)

Compatibilité

L’attribut position est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut position sont:

auto

Le navigateur calcule la position .
Syntaxe :
top : auto

length

Définit une valeur en px, pt, cm, em.
Syntaxe :
top : 20px

pourcentage

Définit une valeur en pourcentage par rapport à l’élément parent.
Syntaxe :
top : 30%

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
top : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
top : inherit

A voir aussi

display– clear– z-index– flex– align-content– align-items– align-self– columns– vertical-align