Explication détaillée de l'attribut position en CSS-tutoriel CSS-php.cn

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

怪我咯

Libérer： 2017-06-22 09:16:17

original

1916 Les gens l'ont consulté

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!