Partager ce que position:relative; fait en CSS ?-tutoriel CSS-php.cn

Partager ce que position:relative; fait en CSS ?

黄舟

Libérer： 2017-07-19 14:39:23

original

2287 Les gens l'ont consulté

Je ne comprends toujours pas ce que signifie position:relative; en CSS et ce que ça fait ?

Je comprends tous les autres attributs de position

Citation

statique : Pas de positionnement particulier, l'objet suit les règles de positionnement HTML
absolu : Faites glisser l'objet hors du flux de documents et utilisez les attributs gauche, droite, haut, bas et autres pour un 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 d'attributs tels que gauche, droite, haut, bas. , etc.
corrigé : IE5.5 et NS6 ne supportent pas encore cet attribut

Pour les nombreux attributs mentionnés dans le document, à l'exception du relatif, l'effet apparaît après les avoir essayés. difficile à comprendre relatif.

Ce n’est pas un positionnement relatif.

Pour une div#demo statique sur la page, je veux qu'un div#sub dans cette #demo soit positionné quelque part dans le coin supérieur droit par rapport à #demo. puis ajoutez le haut et la droite pour le limiter.
Est-ce que je comprends bien ?

Cependant, dans le développement réel, je n'obtiens souvent pas les résultats escomptés. Je pense que c'est parce que je n'ai pas encore complètement compris cette propriété. Maintenant, je veux maîtriser cela complètement, le maîtriser comme position:absolute et faire ce que je veux avec les éléments HTML.
S'il vous plaît, les amis qui comprennent cela peuvent nous en parler, ou fournir des informations, des liens ou autres.

Merci.
Supplément à la question :
Merci pour le lien que vous avez fourni, mais il n'est pas approfondi. J'espère avoir une compréhension détaillée de position:relative.
Question supplémentaire :
reeze, ce que tu as dit est très bien.
Mais qu’en est-il du positionnement de l’élément lui-même qui déclare cet attribut ? Quelles sont les fonctions de son propre haut, gauche, droite et bas ?
Ce dont vous parlez, c'est du comportement des éléments enfants relatifs. Je veux savoir quelque chose sur lui-même.
Question supplémentaire :
N'avez-vous pas donné une explication de base ?

"Pour une div#demo statique sur la page, je veux qu'un div#sub dans cette #demo soit positionné quelque part dans le coin supérieur droit par rapport à #demo. Je devrais utiliser cette position : relative this Okay , puis ajoutez top et right pour le limiter.
Est-ce que je comprends bien ? "

Tout d'abord, laissez-moi répondre à vos questions :
La valeur par défaut de position est statique, (c'est-à-dire que c'est-à-dire, pour tout élément, si son attribut position n'est pas défini, alors sa position : statique)

Si vous voulez qu'un div #sub dans cette #démo soit positionné par rapport à la #démo Quelque part dans la coin supérieur droit, #demo doit être positionné de manière relative et #sub en position absolue.

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.

relatif 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;  
    }  
  
    div#demo{  
        position:relative;  
        border:1px solid #000;  
        margin:50px;  
        top:-50px;  
        line-height:18px;  
        overflow:hidden;  
        clear:both;  
        height:1%;  
    }  
  
    div#sub{  
        position:absolute;  
        right:10px;  
        top:10px;  
    }  
  
    div.relative{  
        position:relative;  
        left:400px;  
        top:-20px;  
    }  
  
    div.static,div.fixed,div.absolute,div.relative{  
        width:300px;      
    }  
  
    div.static{  
        background-color:#bbb;  
        position:static;  
    }  
  
    div.fixed{  
        background-color:#ffc0cb;  
    }  
  
    div.absolute{  
        background-color:#b0c4de;  
    }  
  
    div.relative{  
        background-color:#ffe4e1;  
    }  
    -->  
</style>  
</head>  
<body>  
    <div id="demo">  
        <div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div>  
        <div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>  
        <div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div>  
        <div class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div>  
    </div>  
</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!