Comment définir la position d'une balise en HTML-tutoriel HTML-php.cn

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

青灯夜游

Libérer： 2021-12-13 15:43:45

original

10864 Les gens l'ont consulté

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>

Copier après la connexion

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!