top
===

La propriété **`top`** définit une partie de la position des éléments positionnés, elle n'a aucun effet pour les éléments non-positionnés.

Exemple interactif
------------------

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
-------


```css
/\* 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
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | éléments positionnés |
| Héritée | non |
| Pourcentages | se rapporte à la hauteur du bloc contenant |
| Valeur calculée | si spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, `auto` |
| Type d'animation | une longueur, pourcentage ou calc() ; |

Syntaxe formelle
----------------
```

top =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### Positionnement relatif

#### HTML


```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


```css
div {
  border: 2px black dashed;
}

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


#### Résultat

### Positionnement absolu

#### HTML


```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


```css
div {
  border: 2px black dashed;
}

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


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

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