Attribut top CSS

Définition et utilisation

L'attribut top détermine la bordure supérieure de l'élément. Cette propriété définit le décalage entre la bordure externe supérieure de l'élément de positionnement et la bordure supérieure de son conteneur.

Remarque :Si la valeur de l'attribut position est "static", l'ajustement de l'attribut top n'a aucun effet.

Explication

Pour les éléments statiques, c'est auto ; pour les valeurs de longueur, c'est la longueur absolue correspondante ; pour les pourcentages, c'est la valeur spécifiée ; sinon, c'est auto.

Pour les éléments définis en relatif, si top et bottom sont tous deux auto, leur valeur calculée est 0 ; si l'un des deux est auto, alors il prend la valeur opposée de l'autre ; si les deux ne sont pas auto, bottom prend la valeur opposée de top.

Voir également :

Tutoriel CSS :Positionnement CSS

Guide de référence HTML DOM :Attribut top

Exemple

Positionner le haut de l'image 5 pixels en dessous de la bordure supérieure de l'élément englobant :

img
  {
  position:absolute;
  top:5px;
  }

Essayez-le vous-même

Grammaire CSS

top: auto|longueur|initial|hériter;

Valeur de l'attribut

Valeur Description
auto Valeur par défaut. La position de la bordure supérieure est calculée par le navigateur.
% Définir la position supérieure de l'élément en pourcentage de la largeur de l'élément. Les valeurs négatives sont autorisées.
longueur Définir la position supérieure de l'élément en utilisant des unités telles que px, cm, etc. Les valeurs négatives sont autorisées.
hériter Définit que la valeur de l'attribut top doit être héritée de l'élément parent.

Détails techniques

Valeur par défaut : auto
Héritabilité : non
Version : CSS2
Grammaire JavaScript : object.style.top="50px"

Plus d'exemples

Définir le haut de l'image en valeur fixe
Cet exemple montre comment utiliser une valeur fixe pour définir le haut de l'image.
Définir le haut de l'image en pourcentage
Cet exemple montre comment utiliser un pourcentage pour définir le haut de l'image.

Support du navigateur

Les numéros dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0