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>

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>

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.

Support de Navigateurs

1.0+ 12.0+ 1.0+ 1.0+ 6.0+


Trouvez-vous cela utile?

Articles Associées