Propriété CSS top
La propriété CSS top définit la position verticale d'un élément positionné. Découvrez des exemples et testez-les vous-même.
La propriété CSS top définit la position verticale d'un élément positionné, mesurée depuis le bord supérieur d'un bloc de référence. Seule, elle ne produit aucun effet — elle n'agit que si l'élément possède également une valeur de position différente de la valeur par défaut static.
Cette page explique comment top se comporte pour chaque valeur de position, les unités acceptées, les pièges courants et la façon dont elle s'associe à bottom, left et right.
Fonctionnement de top
Le bloc de référence par rapport auquel top est mesuré — ainsi que la signification du décalage — dépend de la position de l'élément :
position: absoluteoufixed—topdécale l'élément depuis le bord supérieur de son bloc conteneur (pourabsolute, l'ancêtre positionné le plus proche ; pourfixed, le viewport). Une valeur detopplus grande pousse l'élément plus bas.position: relative—topdéplace l'élément vers le bas par rapport à sa position normale, sans affecter la disposition des éléments environnants. L'espace qu'il occupait initialement est préservé.position: sticky—topreprésente la distance par rapport au bord supérieur du conteneur de défilement à laquelle l'élément se « colle » lors du défilement.top: 0le fait coller tout en haut.position: static—topest entièrement ignoré. C'est la valeur par défaut ; pensez donc toujours à définirpositionen premier.
Si top et bottom sont tous deux spécifiés sur un élément positionné en absolu dont la hauteur est auto, l'élément est étiré pour satisfaire les deux ; sinon top prend la priorité et bottom est ignoré.
Les valeurs négatives sont autorisées — top: -20px tire un élément positionné en absolu ou en fixe au-dessus de son bord de référence, et tire un élément positionné en relatif au-dessus de son emplacement normal.
| Valeur initiale | auto |
|---|---|
| S'applique à | Éléments positionnés. |
| Héritage | Non. |
| Animable | Oui. |
| Version | CSS2 |
| Syntaxe DOM | Object.style.top = "50px"; |
Syntaxe
Syntaxe de la propriété CSS top
top: auto | length | initial | inherit;Exemple de la propriété top :
Exemple de la propriété CSS top avec une valeur de longueur
<!DOCTYPE html>
<html>
<head>
<title>Title of the 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>Top property example</h2>
<div>
<p class="ex1">Some text (top: 0;)</p>
<p class="ex2">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
</div>
</body>
</html>Résultat
Exemple de la propriété top avec une valeur négative :
Exemple de la propriété CSS top avec une valeur négative
<!DOCTYPE html>
<html>
<head>
<title>Title of the 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>Top property example</h2>
<div>
<p>Some text.</p>
<p class="top">Text with the top property.</p>
</div>
</body>
</html>Exemple de la propriété top définie en "pt", "%" et "em" :
Exemple de la propriété top avec des valeurs "pt", "%" et "em" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the 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: 5em;
}
.ex2 {
top: 10pt;
}
.ex3 {
top: 75%;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p class="ex1">Some text (top: 0;)</p>
<p class="ex2">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
<p class="ex3">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
</div>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| auto | Définit la position du bord supérieur. C'est la valeur par défaut de cette propriété. | Essayer » |
| length | Définit la position du bord supérieur en px, cm, etc. Les valeurs négatives sont valides. | Essayer » |
| % | Définit la position du bord supérieur en % de l'élément conteneur. Les valeurs négatives sont valides. | Essayer » |
| initial | Applique la valeur par défaut de la propriété. | Essayer » |
| inherit | Hérite de la propriété depuis son élément parent. |
Lorsque vous utilisez une valeur en pourcentage, elle est calculée par rapport à la hauteur du bloc conteneur, et non à sa largeur. Ainsi, top: 50% sur un élément positionné en absolu le déplace vers le bas de la moitié de la hauteur du parent.
Pièges courants
- Oublier
position.topn'a aucun effet sur un élémentstatic. Si votre décalage semble ignoré, vérifiez quepositionest défini surrelative,absolute,fixedousticky. - Ancêtre positionné manquant. Un élément
absolutese décale par rapport à son ancêtre positionné le plus proche. Si aucun n'existe, il se rabat sur le bloc conteneur initial (la racine de la taille du viewport). Donnez au parentposition: relativepour le contenir. stickyqui ne colle pas.position: stickyne fonctionne que si l'élément défile à l'intérieur d'un ancêtre qui génère réellement un dépassement. Une valeurtopsans conteneur défilable, ou un parent avecoverflow: hidden, ne produira aucun effet visible.- Utiliser à la fois
topetbottom. Sur un élément absolu dont la hauteur estauto, ils l'étirent ; sinontopest prioritaire etbottomest ignoré.
Propriétés associées
- position — obligatoire pour que
topprenne effet. - bottom, left, right — les autres propriétés de décalage, utilisées conjointement avec
toppour placer les éléments positionnés. - z-index — contrôle l'ordre d'empilement lorsque des éléments positionnés se superposent.