top

Exemple interactif

top: 0;

top: 4em;

top: 10%;

top: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">Je suis positionné absolument.</div>
    <p>
      Autant de boue dans les rues comme si les eaux venaient de se retirer de
      la surface de la terre, et il ne serait pas étonnant de rencontrer un
      Megalosaurus, d'environ douze mètres de long, se dandinant comme un lézard
      éléphantesque sur 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 top dépend de la façon dont l'élément est positionné (c'est‑à‑dire de la valeur de la propriété position) :

• Lorsque position est défini sur absolute ou fixed, la propriété top définit la distance entre la marge extérieure du bord supérieur de l'élément et la bordure intérieure du bord supérieur de son bloc conteneur, ou, dans le cas des éléments positionnés par ancrage lorsque la fonction anchor() est utilisée dans la valeur, par rapport au bord <anchor-side> défini. La propriété top est compatible avec les valeurs top, bottom, start, end, self-start, self-end, center et <percentage>.
• Lorsque position est défini sur relative, la propriété top définit la distance à laquelle le bord supérieur de l'élément est déplacé en dessous de sa position normale.
• Lorsque position est défini sur sticky, la propriété top est utilisée pour calculer le rectangle de contrainte sticky.
• Lorsque position est défini sur static, la propriété top n'a aucun effet.

Lorsque les valeurs top et bottom sont toutes deux définies, il existe trois cas différents :

• Si position est défini sur absolute ou fixed et que height n'est pas définie (soit auto, soit 100%), les valeurs top et bottom sont toutes deux respectées.
• Si position est défini sur relative ou si la propriété height est contrainte, la propriété top prime et la propriété bottom est ignorée.
• Si position est défini sur sticky, les valeurs top et bottom sont prises en compte. Cela signifie qu'un élément attaché peut potentiellement se déplacer vers le haut et vers le bas au sein de son bloc englobant en fonction des valeurs de ces deux propriétés, tant que la boîte de position de l'élément reste contenue dans son bloc englobant.

Syntaxe

/* Valeur de type <length> */
top: 3px;
top: 2.4em;
top: anchor(bottom);
top: anchor-size(--mon-ancre self-block, 10%);

/* Valeurs de type <percentage> */
top: 10%;

/* Valeurs avec un mot-clé */
top: auto;

/* Valeur globale */
top: inherit;
top: initial;
top: revert;
top: revert-layer;
top: unset;

Valeurs

<length>

Une longueur (<length>) négative, nulle ou positive :

• pour les éléments positionnés absolument, elle représente la distance par rapport au bord supérieur du bloc englobant.
• pour les éléments positionnés par ancre, la fonction anchor() se résout en une valeur <length> relative à la position du bord supérieur ou inférieur de l'élément ancre associé (voir Utilisation des propriétés inset avec les valeurs de fonction anchor()), et la fonction anchor-size() se résout en une valeur <length> relative à la largeur ou à la hauteur de l'élément ancre associé (voir Définir la position de l'élément en fonction de la taille de l'ancre).
• pour les éléments positionnés relativement, elle représente la distance que l'élément est déplacé en dessous de sa position normale.

<percentage>

Un pourcentage (<percentage>) de la hauteur du bloc englobant.

auto

Définit que :

• pour les éléments positionnés absolument, la position de l'élément est basée sur la propriété bottom, tandis que height: auto est traité comme une hauteur basée sur le contenu ; ou si bottom est également auto, l'élément est positionné là où il devrait être verticalement s'il était un élément statique.
• pour les éléments positionnés relativement, la distance de l'élément par rapport à sa position normale est basée sur la propriété bottom ; ou si bottom est également auto, l'élément n'est pas déplacé verticalement du tout.

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

Un élément positionné à 10 % du haut

body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}

<div>La taille de ce contenu est déterminée par la position de ses bords.</div>

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés bottom, left et right
• La propriété raccourcie inset
• Les propriétés inset-block-start, inset-block-end, inset-inline-start et inset-inline-end
• inset-block, et la propriété raccourcie inset-inline
• La propriété position
• Le module de disposition positionnée CSS