Propriété top
La propriété top définit la position
du bord supérieur de l'élément par rapport au haut de l'élément parent.
Les valeurs de cette propriété peuvent être
exprimées avec les unités de mesure courantes,
par exemple en pixels, pouces, points, pourcentages.
Les valeurs définies peuvent également être négatives,
dans ce cas les éléments se superposeront les uns
aux autres. Le point de référence des coordonnées est déterminé par la propriété position,
qui prend généralement la valeur relative
(position relative) ou absolute
(position absolue).
Syntaxe
sélecteur {
top: taille ou auto;
}
Exemple
Lors du survol d'un élément enfant,
définissons la position de son bord supérieur
à 25px :
<div id="elem">
<p></p>
</div>
#elem {
width: 400px;
height: 300px;
border: 1px solid black;
}
p {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
margin-top: 50px;
margin-left: 50px;
}
p:hover {
top: 25px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Exemple
Maintenant, lors du survol, le bord supérieur
de l'élément enfant sera positionné
à -50px :
<div id="elem">
<p></p>
</div>
#elem {
width: 400px;
height: 300px;
border: 1px solid black;
}
p {
position: relative;
margin-top: 50px;
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 50px;
}
p:hover {
top: -50px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Voir aussi
-
la propriété
bottom,
qui définit la position du bord inférieur de l'élément -
la propriété
left,
qui définit la position du bord gauche de l'élément -
la propriété
right,
qui définit la position du bord droit de l'élément -
le pseudo-élément
::backdrop,
qui définit la position après le premier élément -
la propriété
caption-side,
qui définit la position de la légende d'un tableau