Maison > interface Web > tutoriel CSS > le corps du texte

Explication détaillée de l'attribut position en CSS

怪我咯
Libérer: 2017-06-22 09:16:17
original
1931 Les gens l'ont consulté

En

CSS, l'attribut position sert à définir le type de positionnement de l'élément. Il inclut l'absolu (positionnement absolu), relatif (positionnement relatif). , Il y a quatre paramètres : statique ( statique positionnement, valeur par défaut) et fixe (positionnement fixe).

  • statique : par défaut. Un élément dont la position est définie sur static sera toujours à la position donnée par le flux de la page (les éléments statiques ignorent les déclarations top, bottom, left ou right).

  • relatif : Un élément dont la position est définie sur relative peut être déplacé par rapport à sa position normale, donc "left:20" déplacera l'élément vers La position est de 20 pixels à gauche de la position normale.

  • absolu : Un élément dont la position est définie sur absolue peut être positionné à des coordonnées spécifiées par rapport à l'élément qui le contient. La position de cet élément peut être spécifiée via les attributs "left", "top", "right" et "bottom".

  • fixe : les éléments dont la position est définie sur fixe peuvent être positionnés à des coordonnées spécifiées par rapport à la fenêtre du navigateur. La position de cet élément peut être spécifiée via les attributs "left", "top", "right" et "bottom". L'élément restera dans cette position, que la fenêtre défile ou non. Fonctionne sous IE7 (mode strict).

Exemple

Utilisez l'attribut position pour positionner l'élément

, le code est le suivant

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

</html>
Copier après la connexion


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal