top

Exemple interactif

top: 0;

top: 4em;

top: 10%;

top: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">I am absolutely positioned.</div>
    <p>
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up 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 la propriété top dépend de la façon dont l'élément est positionné (autrement dit, il dépend de la valeur de la propriété position) :

• Pour les éléments qui sont positionnés de manière absolue (position: absolute ou position: fixed), cette propriété définit la distance entre le bord haut de la marge (margin) de l'élément et le bord haut du bloc englobant (il faut que le bloc englobant ait position: relative).
• Lorsque position vaut relative, cela définit la grandeur du déplacement avec laquelle l'élément est placé en dessous de sa position normale.
• Lorsque position vaut sticky, la propriété top se comporte comme avec relative lorsque l'élément se situe à l'intérieur de la zone d'affichage (viewport) et elle se comporte comme fixed lorsque l'élément est à l'extérieur de la zone d'affichage.
• Lorsque position vaut static, la propriété top n'a aucun effet.

Lorsque top et bottom sont utilisés tous les deux, tant que height n'est pas définie ou ne vaut pas auto ou 100%, les distances introduites par top et bottom seront respectées. Sinon, si height est contrainte d'une certaine façon, la propriété top prendra le pas sur bottom qui sera ignorée.

Syntaxe

/* Valeur de longueur */
/* Type <length> */
top: 3px;
top: 2.4em;

/* Valeur en pourcentages */
/* Relative à la hauteur du bloc englobant */
/* Type <percentages> */
top: 10%;

/* Avec un mot-clé */
top: auto;

/* Valeur globale */
top: inherit;
top: initial;
top: unset;

Valeurs

<length>

Une valeur négative, nulle ou positive du type <length> qui représente :

• La distance depuis le bord haut du bloc englobant pour les éléments positionnés de façon absolue
• Le décalage avec lequel l'élément est déplacé vers le bas (relativement à sa position normale) pour les éléments positionnés de façon relative.

<percentage>

Une valeur du type <percentage> qui est relative à la hauteur du bloc englobant.

auto

Un mot-clé qui représente :

• Pour les éléments positionnés de façon absolue, la position de l'élément en fonction de la propriété bottom et qui traite height: auto comme une hauteur basée sur le contenu. Si bottom vaut également auto, l'élément est positionné verticalement comme s'il avait été un élément statique.
• Pour les éléments positionnés de façon relative, le décalage de l'élément par rapport à sa position originale, basée sur la propriété bottom. Si bottom vaut également auto, aucun décalage n'est appliqué.

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

Positionnement relatif

HTML

<div>
  <p>Lorem ipsum et tralala normal</p>
  <p class="relatif">Lorem ipsum et tralala relatif</p>
  <p>Lorem ipsum et tralala normal</p>
</div>

CSS

div {
  border: 2px black dashed;
}

p.relatif {
  position: relative;
  top: 5em;
  border: 2px black solid;
}

Résultat

Positionnement absolu

HTML

<div>
  <p>Lorem ipsum et tralala normal</p>
  <p class="absolu">Lorem ipsum et tralala absolu</p>
  <p>Lorem ipsum et tralala normal</p>
</div>

CSS

div {
  border: 2px black dashed;
}

p.absolu {
  position: absolute;
  top: 5em;
  border: 2px black solid;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• position
• bottom
• height
• left
• right
• Les bases de CSS : la disposition et le positionnement