Explication détaillée du positionnement relatif, du positionnement absolu et du positionnement fixe-tutoriel HTML-php.cn

Explication détaillée du positionnement relatif, du positionnement absolu et du positionnement fixe

零下一度

Libérer： 2017-07-02 09:40:11

original

6552 Les gens l'ont consulté

La position de l'élément dans le flux de documents est déterminée par la position de l'élément dans (X)HTML. Il s'agit du flux ordinaire le plus primitif mentionné précédemmentNotes d'étude CSS 08 Float<.>Vous pouvez modifier la position de l'élément dans le flux de documents. En plus de cela, nous pouvons également redéterminer la position de l'élément dans le flux de documents en utilisant la propriété position de CSS.

valeur de l'attribut de position

statique : la méthode de mise en page du flux de documents par défaut génère une boîte rectangulaire dans le cadre du flux de documents, et les éléments en ligne créent. une ou plusieurs zones de ligne, placées dans leur élément parent. (Ignorez les déclarations haut, bas, gauche, droite ou z-index).
relatif : décalage par rapport à la position d'origine. Le processus de complétion consiste à générer d'abord un élément en mode statique (flottant). Par rapport à la position précédente, la direction et l'amplitude du mouvement sont déterminées. par left , right, top et bottom les attributs sont déterminés, et l'espace initialement occupé par
reste .
absolu :
La zone d'élément est complètement supprimée du flux de documents, et l'espace initialement occupé par l'élément dans le flux de documents normal sera fermé,Comme si l'élément n'existait pas avant , le positionnement est effectué en fonction du conteneur parent (doit être un conteneur positionné non statique). L'élément génère une boîte au niveau du bloc après le positionnement, quel que soit le type de boîte qu'il a généré à l'origine dans le flux normal.
fixé : corrigé à un certain emplacement dans le navigateur et ne changera pas lorsque le navigateur défile.

static est la méthode de mise en page par défaut et ne sera pas présentée ici.

Positionnement relatif relatif

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>CSS相对定位</title> 6  7     <style type="text/css"> 8         div {height: 100px; width: 100px; border: 1px solid #000; background-color: yellow;} 9     </style>10 </head>11 <body>12     <div class="box1">box1</div>13     <div class="box2">box2</div>14     <div class="box3">box3</div>15 </body>16 </html>

Copier après la connexion

À ce moment, box1 et box2 sont positionnés sur la page selon la méthode de mise en page statique .Maintenant Positionnement relatif de box2

Le résultat est le suivant La position de box2 est décalée (ce décalage est par rapport à la position d'origine de box2), et elle n'a pas. Effet à la position de box1 et box3

Notez que lors de l'utilisation du positionnement relatif, l'élément occupe toujours l'espace d'origine, qu'il soit déplacé ou non. ou non. Par conséquent, déplacer un élément l’amène à recouvrir d’autres cases.

absolu Positionnement absolu

Le positionnement absolu rend la position de l'élément indépendante du flux de documents, il n'occupe donc pas d'espace. Ceci est différent du positionnement relatif, qui est en fait considéré comme faisant partie du modèle de positionnement du flux normal car la position de l'élément est relative à sa position dans le flux normal.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>CSS绝对定位</title> 6  7     <style type="text/css"> 8         .parent {height: 200px; width: 200px; background-color: yellow;} 9         .child {height: 100px; width: 100px; background-color: red; top: 0px; right: 0px; position: absolute;}10     </style>11 </head>12 <body>13     <div class="parent">14         parent15         <div class="child">16             child17         </div>18     </div>19 </body>20 </html>

Copier après la connexion

Ajoutez maintenant un attribut de positionnement au parent

L'effet est le même suit, Vous pouvez voir que la position de l'enfant a changé

Du phénomène ci-dessus, nous pouvons résumer une chose : la position d'un absolument L'élément positionné est relatif à l'élément ancêtre le plus proche. Si l'élément n'a pas d'éléments ancêtres positionnés, alors sa position est relative au bloc contenant d'origine (dans ce cas, l'élément body et le parent).

Pour utiliser le positionnement absolu, il doit y avoir deux conditions
1. Le parent doit être informé Pour ajouter des attributs de positionnement aux éléments, il est généralement recommandé d'utiliser position:relative
2. Ajoutez un positionnement absolu aux éléments enfants : position:absolute, et ajoutez également des attributs de direction ( faisant référence à l'attribut left, right, top, bottom)

positionnement fixe fixe

est similaire au type de positionnement absolu, mais ses coordonnées de mouvement relatif sont la vue (web fenêtre de page à l'intérieur de l'écran) lui-même. Étant donné que la vue elle-même est fixe, elle ne changera pas à mesure que la barre de défilement de la fenêtre du navigateur défile, à moins que vous ne déplaciez la position de la fenêtre du navigateur sur l'écran ou que vous ne modifiiez la taille d'affichage de la fenêtre du navigateur, de sorte que les éléments positionnés de manière fixe seront soyez toujours dans une position A dans la vue de la fenêtre du navigateur qui n'est pas affectée par le flux du document.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>CSS固定定位</title> 6     <style type="text/css"> 7         .back-top {height: 40px; width: 40px; background-color: blue; color: #fff; position: fixed; bottom: 10px;right: 10px;} 8     </style> 9 </head>10 <body>11     <div class="back-top">回到顶部</div>    12     <p>段落1</p>13     <p>段落2</p>14     <p>段落3</p>15     ...16     <p>段落49</p>17     <p>段落50</p>18 </body>19 </html>

Copier après la connexion

L'effet de

est le suivant. Le div renvoyé en haut est toujours dans la même position, et le sur la page du blog est également positionné de manière fixe.

Résumé

Le positionnement absolu est basé sur l'élément parent comme point de référence. Il se détachera du flux documentaire et. n'occupe pas l'espace de position d'origine.
Le positionnement relatif est basé sur lui-même comme point de référence, laissant la position d'origine, mais il occupera toujours l'espace de position d'origine
Le positionnement fixe est basé sur la fenêtre du navigateur comme référence. point, il est toujours dans la même position et ne bougera pas

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!