Propriété CSS top

La propriété top définit la position supérieure d'un élément en combinaison avec la propriété position .

L'effet de la propriété top dépend de la façon du positionnement de l'élément (voyez la propriété position ).

Si la position est définie à "absolute" ou "fixed", la propriété top spécifie le bord supérieur d'un élément à une unité au dessus/au dessous du bord suérieur de son ancêtre positionné le plus proche.
Si la position est définie à "relative", la propriété top spécifie le bord supérieur à bouger au dessus/au dessous de sa position normale.
Si la position est définie à "sticky", la propriété top change sa position à relative lorsque l'élément est dans la zone d'affichage, et change à fixed lorsqu'il est en dehors.
Quand la propriété position est définie à "static", la propriété position n'est pas appliquée.

Valeurs négatives sont autorisées.

Valeur initiale	auto
Appliquée à	Éléments positionnés.
Héritée	Non.
Animable	Oui.
Version	CSS2
Syntaxe DOM	Object.style.top = "50px";

Syntaxe

top: auto | length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      background-color: #8ebf42;
      height: 200px;
      width: 600px;
      position:relative;
      }
      p {
      margin: 0;
      color: #eee;
      position: absolute;
      border: 2px solid #666;
      }
      .ex1 {
      top: 0;
      }
      .ex2 {
      top: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété top</h2>
    <div>
      <p class="ex1">Quelque texte (top: 0;)</p>
      <p class="ex2">Le Lorem Ipsum est simplement du faux texte ...(ce texte est positionné 50 pixels en bas du bord supérieur de l'élément contenant positionné.)</p>
    </div>
  </body>
</html>

Essayez-vous-même!

Un exemple dans lequel la valeur négative est spécifiée:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      background-color: #666;
      height: 200px;
      position: relative;
      }
      p {
      margin: 0;
      color: #fff;
      }
      .top{
      position: absolute;
      top: -35px;
      color: #000000;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété top</h2>
    <div>
      <p>Quelque texte.</p>
      <p class="top">Texte avec la propriété top.</p>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Descriptions
auto	Définit la position du bord supérieur. C'est la valeur initiale de cette propriété.
length	Définit la position du bord supérieur en px, cm etc. Valeurs négatives sont autorisées.
%	Définit la position du bord supérieur en % de l'élément contenant. Valeurs négatives sont autorisées.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.