Propriété top en CSS
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 dont l'élément est positionné (voir la propriété position).
- Si
positionest défini sur "absolute" ou "fixed", la propriététopspécifie le bord supérieur d'un élément à une unité au-dessus/en dessous du bord supérieur de son ancêtre positionné le plus proche. - Si
positionest défini sur "relative", la propriététopspécifie le déplacement du bord supérieur au-dessus/en dessous de sa position normale. - Si
positionest défini sur "sticky", la propriététoppasse en relative lorsque l'élément est dans la zone d'affichage (viewport), et en fixed lorsqu'il en sort. - Lorsque la propriété
positionest définie sur "static", elle n'est pas appliquée.
INFO
Les valeurs négatives sont autorisées.
| Valeur initiale | auto |
|---|---|
| S'applique à | Éléments positionnés. |
| Héritée | Non. |
| Animable | Oui. |
| Version | CSS2 |
| Syntaxe DOM | Object.style.top = "50px"; |
Syntaxe
Syntaxe de la propriété top en CSS
css
top: auto | length | initial | inherit;Exemple de la propriété top :
Exemple de la propriété top en CSS avec une valeur de longueur
html
<!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é top en CSS avec une valeur négative
html
<!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" :
html
<!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 | Jouer |
|---|---|---|
| auto | Définit la position du bord supérieur. C'est la valeur par défaut de cette propriété. | Jouer » |
| length | Définit la position du bord supérieur en px, cm, etc. Les valeurs négatives sont valides. | Jouer » |
| % | Définit la position du bord supérieur en % de l'élément conteneur. Les valeurs négatives sont valides. | Jouer » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Jouer » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété CSS 'top' ?