Syntaxe
Paramètres
| Paramètre |
Description |
| paramètres |
Ce paramètre de propriété permet d'indiquer la distance : |
| auto |
Cet attribut permet d'indiquer que la distance est calculé automatiquement. |
| inherit |
Cet attribut permet d'indiquer qu'il hérite des propriétés de la balise parente. |
| initial |
Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
| distance |
Cet attribut permet d'indiquer que la distance calculé en pixels. La valeur par défaut est 0. |
| pourcentage% |
Cet attribut permet d'indiquer que l'espacement est calculé en fonction du pourcentage de la hauteur du document. |
Description
Cette propriété permet d'indiquer la distance vertical d'un élément par rapport à son conteneur.
Remarques
- Positionnement relatif à l'élément parent : La propriété top définit le déplacement vertical d'un élément par rapport à son conteneur de positionnement.
Cependant, elle ne fonctionne que si la propriété position est définie sur relative, absolute, fixed ou sticky. Par défaut, les éléments ayant
position: static ne sont pas affectés par la propriété top.
- Effet avec position: relative : Lorsqu'elle est utilisée avec position: relative, la valeur de top déplace l'élément par rapport à sa position
normale dans le flux du document. Cela ne retire pas l'élément du flux et laisse son espace d'origine intact, ce qui peut provoquer des chevauchements avec d'autres éléments.
- Comportement avec position: absolute : Avec position: absolute, la propriété top déplace l'élément par rapport à son conteneur le plus proche
positionné (ayant une propriété position autre que static). Si aucun conteneur positionné n'est trouvé, l'élément est positionné par rapport à la boîte de la page
entière (viewport).
- Positionnement dans le viewport avec fixed : Lorsqu'elle est utilisée avec position: fixed, la propriété top déplace l'élément par
rapport au coin supérieur du viewport. L'élément reste à cette position même lorsque la page est défilée, rendant la combinaison utile pour des barres fixes ou des pop-ups.
- Utilisation avec des unités variées : La valeur de top peut être exprimée en différentes unités comme des pixels (px), des pourcentages (%), des unités relatives
(em, rem), ou même des unités de la fenêtre d'affichage (vh). Les pourcentages sont basés sur la hauteur du conteneur positionné parent.
- Impact dans les animations : La propriété top est souvent utilisée dans les animations CSS ou
JavaScript pour déplacer verticalement un élément sur l'écran. Par exemple, une animation simple pourrait modifier la valeur
de top de 0px à 100px pour faire "glisser" un élément vers le bas.
- Valeurs négatives pour les déplacements inverses : top accepte également des valeurs négatives, permettant de déplacer un élément vers le haut au-delà de
son conteneur. Par exemple, top: -20px; positionne l'élément 20 pixels au-dessus de son point de référence, ce qui peut être utile pour des effets d'alignement ou de
chevauchement.
- Interaction avec les autres propriétés de positionnement : La propriété top fonctionne souvent en tandem avec left, right et bottom pour un
positionnement précis. Cependant, si des conflits apparaissent (par exemple, si top et bottom sont définis ensemble sur un élément avec une hauteur fixe), cela
peut entraîner des comportements inattendus dans certains navigateurs.
Dernière mise à jour : Dimanche, le 20 décembre 2015
