Maison > Article > interface Web > Introduction au rôle de position:relative en CSS
Introduction au rôle de position:relative en CSS
- 不言original
- 2018-07-02 09:32:553632parcourir
Cet article présente principalement le rôle de position:relative; en CSS. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
Position en CSS : Relative contrôle le. positionnement relatif des éléments. Le relatif ne s'éloigne pas du flux de documents, tandis que l'absolu s'éloigne du flux de documents. Bien que l'élément relatif semble avoir dévié de sa position d'origine, il reste en réalité inchangé dans le flux de documents
Citation
statique : Pas de positionnement particulier, l'objet suit les règles de positionnement HTMLabsolu : Faites glisser l'objet hors du flux de documents, en utilisant des attributs tels que gauche, droite, haut, bas etc. Positionnement absolu. Et sa cascade est définie via l'attribut z-index. Pour le moment, l'objet n'a pas de marges, mais il y a toujours un remplissage et des bordures
relatives : l'objet ne peut pas être empilé, mais sera décalé dans le flux normal du document en fonction des attributs gauche, droite, haut, bas et autres.
corrigé : IE5.5 et NS6 ne supportent pas encore cet attribut
Je comprends bien »
Tout d'abord, laissez-moi répondre à vos doutes :
La valeur par défaut de position est static, (c'est-à-dire que pour tout élément, si son attribut position n'est pas défini, sa position:static)
Si vous voulez qu'un p#sub dans cette #démo soit relatif à # Le demo est positionné quelque part dans le coin supérieur droit. #demo doit être positionné de manière relative et #sub absolument.
Absolute est positionné par rapport à son élément parent le plus proche. Si vous ne positionnez pas #demo de manière relative, alors le positionnement absolu de #sub sera positionné par rapport au corps.
relative est positionné par rapport à lui-même, par exemple : #demo{position:relative;top:-50px;}, puis #demo se déplacera de 50px par rapport à sa position d'origine.
Autre : le relatif ne se détache pas du flux documentaire, l'absolu se détache du flux documentaire. Autrement dit : même si l'élément relatif semble avoir dévié de sa position d'origine, il reste en réalité inchangé dans le flux documentaire. L'élément absolu change non seulement de position, mais se détache également du flux documentaire.
a écrit un exemple comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>position</title>
<style type="text/css">
<!--
body{
font-size:12px;
margin:0 auto;
}
p#demo{
position:relative;
border:1px solid #000;
margin:50px;
top:-50px;
line-height:18px;
overflow:hidden;
clear:both;
height:1%;
}
p#sub{
position:absolute;
right:10px;
top:10px;
}
p.relative{
position:relative;
left:400px;
top:-20px;
}
p.static,p.fixed,p.absolute,p.relative{
width:300px;
}
p.static{
background-color:#bbb;
position:static;
}
p.fixed{
background-color:#ffc0cb;
}
p.absolute{
background-color:#b0c4de;
}
p.relative{
background-color:#ffe4e1;
}
-->
</style>
</head>
<body>
<p id="demo">
<p class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </p>
<p id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </p>
<p class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </p>
<p class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </p>
</p>
</body>
</html> Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun pour en savoir plus. contenu, veuillez faire attention au site Web chinois PHP ! Recommandations associées :
Comment utiliser l'attribut position:fixed pour centrer un DIV
Utiliser CSS3 pour obtenir Material Effet design
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!