Explication détaillée de la position de l'attribut de positionnement : relative et absolue

Balise de positionnement : position

contient attributs  : relatif (relatif)

                                                                                                          position:relative; il apparaîtra à son emplacement. Déplacez ensuite l'élément "par rapport" à son point de départ d'origine en définissant une position verticale ou horizontale. (Encore un point, lors du positionnement relatif, qu'il soit déplacé ou non, l'élément occupe toujours l'espace d'origine. Par conséquent, déplacer l'élément le fera recouvrir d'autres cases)

Positionnement relatif : le relatif fait ne rompt pas avec le flux normal du document et est défini. L'élément est positionné par rapport à sa position d'origine et ses informations d'espace réservé d'origine existent toujours

2.position:absolute; signifie

, et la position sera calculée en fonction du coin supérieur gauche du navigateur. Le positionnement absolu retire l'élément du flux de documents afin qu'il ne prenne pas de place. Les éléments du flux de documents normal sont disposés comme si les éléments positionnés de manière absolue n'étaient pas présents. (Comme les boîtes positionnées de manière absolue n'ont rien à voir avec le flux de documents, elles peuvent couvrir d'autres éléments de la page et leur ordre hiérarchique peut être contrôlé via z-index. Plus le z-index est élevé, plus il est visible. est. Au niveau supérieur.) Positionnement absolu : les ablutions sont séparées du flux de documents et du modèle

, existant indépendamment des autres objets, sans espaces réservés. 3. Une fois que le conteneur parent utilise le positionnement relatif et que l'élément enfant utilise le positionnement absolu, la position de l'élément enfant n'est plus relative au coin supérieur gauche du navigateur, mais par rapport au coin supérieur gauche de la fenêtre parent

ci-dessous Description spécifique du cas :

1. Si c est imbriqué dans b et que b et c sont tous deux positionnés relativement, alors le positionnement relatif de c est par rapport à b, b conserve les informations d'espace réservé et b conserve les informations d'espace réservé de c.

2. Si c est imbriqué dans b, b est positionné de manière absolue et c est positionné par rapport, alors b est hors flotteur et n'a aucune information d'espace réservé, tandis que c est positionné par rapport à b et l'espace réservé apparaît dans b.

3. Si a, b, c, d sont juxtaposés et sont tous imbriqués dans un div avec l'identifiant du groupe, et :

#group{potision:relative;

:200px;width : 4oopx ;}       #b{potision:absolute;left:20px;top:20px;}De cette façon, l'élément parent est positionné de manière relative, mais les valeurs de left et top ne sont pas définies. Il peut être considéré. comme objet flottant, et b est positionné de manière absolue, donc il n'occupe pas d'espace. Cependant, puisque l'élément parent est positionné relativement, le positionnement absolu devient ici un positionnement absolu par rapport à l'élément parent, et non par rapport au navigateur. Par exemple :

<div id="main">
<div id="a">aaaaaaaaaa</div>
<div id="b">bbbbbbbb</div>
</div>

Si position:relative est défini pour a, (sans se détacher du flux de documents), a occupera la position A est positionné par rapport à sa position d'origine et semble flotter sur main,. tandis que b Il sera disposé de la manière originale et ne sera pas affecté par a. (La position de b est la même que lorsque a n'a pas d'attribut de position)

Remarque : si l'élément parent ne définit pas de valeur de largeur et de hauteur valide, b est positionné de manière absolue par rapport au coin supérieur droit du dernier élément du groupe. L'élément parent doit être défini en largeur et en hauteur ! ! ! ! ! !

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!