Maison >interface Web >tutoriel HTML >Comment définir la position d'une balise en HTML

Comment définir la position d'une balise en HTML

青灯夜游
青灯夜游original
2021-12-13 15:43:4511058parcourir

Méthode de paramétrage : 1. Ajoutez le style "position : relative ;" à la balise parent de la balise a pour un positionnement relatif ; 2. Ajoutez le style "position : absolue ;" à la balise a pour un positionnement absolu ; top, bottom, Les attributs left et right contrôlent la position d'une étiquette.

Comment définir la position d'une balise en HTML

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En HTML, vous pouvez utiliser l'attribut position pour définir la position de la balise a :

  • Ajoutez le style "position : relative ;" à la balise parent de la balise a pour un positionnement relatif 

  • Ajouter ; "position : "absolu ;" le style effectue un positionnement absolu ;

  • Utilisez les attributs haut, bas, gauche et droit pour contrôler la position d'une étiquette.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				width: 300px;
				height: 200px;
				background-color: yellow;
				position: relative;
			}
			a{
				position: absolute;
				top: 50px;
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<a>我是一个a标签</a>
		</div>
	</body>
</html>

Comment définir la position dune balise en HTML

Description : L'attribut

position précise le type de méthode de positionnement d'un élément (statique, relatif, absolu ou fixe).

  • relative : Génère des éléments relativement positionnés, positionnés par rapport à leur position normale. Par conséquent, "left:20" ajoute 20 pixels à la position GAUCHE de l'élément.

  • absolu : Génère des éléments positionnés de manière absolue, positionnés par rapport au premier élément parent autre que le positionnement statique. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn