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

positionnement absolu

, 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

flottant

, 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;

height

: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 :

(1) Si position : absolue est défini sur a, a sera séparé du flux de documents normal et a n'occupera pas de position, c'est-à-dire que b est n'est plus basé sur un, mais démarre directement le positionnement à partir du parent. (La position b est la même que sans a).

<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)

(2) Si vous définissez position: relative/absolute pour main alors le positionnement absolu ou relatif de a ou b à l'intérieur est relatif au parent ; element main, Puis positionner selon la méthode relative ou absolue

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!