Maison >interface Web >tutoriel CSS >Explication détaillée de l'attribut position en CSS
Explication détaillée de l'attribut position en CSS
- 怪我咯original
- 2017-06-22 09:16:171937parcourir
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 c1a436a314ed609750bd7c7d319db4da, 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>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!