Maison > Article > interface Web > Comment définir la position du texte en HTML
Comment définir la position du texte en HTML
- 青灯夜游original
- 2021-05-20 12:56:5653374parcourir
Comment définir la position du texte en HTML : utilisez d'abord l'attribut position pour définir le type de positionnement de l'élément de texte (positionnement absolu ou positionnement fixe), puis utilisez les attributs top, bottom, left et right pour définir ; la valeur de décalage de l'élément de texte, puis définissez la position de l'élément de texte.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Comment définir la position du texte en HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p#p1{
position: absolute;
top: 20px;
left: 20px;
}
p#p2{
position: absolute;
bottom: 0px;
right: 20px;
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="Comment définir la position du texte en HTML" >
<p id="p1">测试文本！测试文本！</p>
<p id="p2">测试文本！测试文本！</p>
</body>
</html>Rendu :
Description :
attribut de position spécifie le type de positionnement de l'élément.
Cet attribut définit le mécanisme de positionnement utilisé pour établir la disposition de l'élément. N'importe quel élément peut être positionné, mais les éléments absolus ou fixes génèrent une boîte au niveau du bloc, quel que soit le type de l'élément lui-même. Un élément positionné relativement est décalé par rapport à sa position par défaut dans un écoulement normal.
| Valeur | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| absolue |
est spécifiée via les attributs "left", "top", "right" et "bottom". |
||||||||||
| fixe | Génère des éléments absolument positionnés, positionnés par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom". | ||||||||||
| relatif | Génère un élément relativement positionné, positionné par rapport à sa position normale. Donc "left:20" ajoute 20 pixels à la position GAUCHE de l'élément. | ||||||||||
| statique | Valeur par défaut. Sans positionnement, l'élément apparaît dans un flux normal (en ignorant les déclarations haut, bas, gauche, droite ou z-index). |
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.
Pour les éléments de définition relatifs, si top et bottom sont tous deux auto, leurs valeurs calculées sont toutes deux 0 ; si l'une d'elles est auto, la valeur opposée de l'autre est prise si aucune d'elles n'est auto, bottom ; sera l'inverse de la valeur de top.attribut bottom
spécifie le bord inférieur de l'élément. Cette propriété définit le décalage entre la limite inférieure de la marge de l'élément positionné et la limite inférieure de son bloc conteneur. Pour les éléments positionnés de manière absolue, l'attribut bottom définit l'unité au-dessus/en dessous du bas de l'élément qui la contient. Pour les éléments positionnés relativement, l'attribut bottom définit le bord inférieur de l'élément en unités au-dessus/en dessous de sa position normale.attribut left spécifie le bord gauche de l'élément. Cette propriété définit le décalage entre le bord de la marge gauche de l'élément positionné et le bord gauche de son bloc conteneur.
attribut right spécifie le bord droit de l'élément. Cette propriété définit le décalage entre le bord de la marge droite de l'élément positionné et le bord droit de son bloc conteneur. 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 relativement définis, left est toujours évalué à droite. Tutoriels recommandés : Tutoriel vidéo HTML, Tutoriel vidéo CSSCe 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!