top en HTML5 signifie "haut" et "distance du haut". L'attribut top est utilisé pour spécifier le bord supérieur de l'élément. Il peut également être utilisé pour définir le décalage entre la limite extérieure supérieure de l'élément positionné et le. limite supérieure de son bloc conteneur. La syntaxe est : "
" ou "Object.style.top=value". <element style="top:值">
L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur Dell G3.
Que signifie top en html5 ?
L'attribut top spécifie le bord supérieur de l'élément. Cette propriété définit le décalage entre la limite de marge supérieure d'un élément positionné et la limite supérieure de son bloc conteneur.
Remarque : Si la valeur de l'attribut "position" est "statique", alors la définition de l'attribut "top" n'aura aucun effet.
Pour les éléments statiques, c'est auto ; pour les valeurs de longueur, c'est la longueur absolue correspondante ; pour les valeurs en pourcentage, c'est la valeur spécifiée sinon c'est auto ;
Pour les éléments de définition relative, si top et bottom sont tous deux auto, leurs valeurs calculées sont toutes deux 0 ; si l'une d'elles est auto, l'opposé de l'autre valeur est prise si aucune d'elles n'est auto, bottom sera top ; l'opposé de la valeur.
La syntaxe est la suivante :
<element style="top:值">
L'attribut top définit le décalage entre la limite de la marge supérieure d'un élément positionné et la limite supérieure de son bloc conteneur.
La syntaxe est :
Object.style.top=auto|%|length
L'exemple est le suivant :
<html>
<head>
<style type="text/css">
input
{
position:absolute;
}
</style>
<script type="text/javascript">
function setTopEdge()
{
document.getElementById("b1").style.top="100px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setTopEdge()"
value="Set top edge to 100 px" />
</body>
</html>Résultat de sortie :
Tutoriel recommandé : "Tutoriel vidéo HTML"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
