Explication détaillée de la position de l'attribut de positionnement CSS, de la classification de positionnement et de la hiérarchie de positionnement

Une lecture incontournable pour zéro base du HTML - pour débuter avec HTML, la programmation est si simple

Chapitre 11 : attribut de positionnement de position

Résumer

1. Comprendre l'attribut de position

1.1 Qu'est-ce que le positionnement

L' postionattribut de positionnement nous permet de supprimer l'élément du flux de documents, puis d'utiliser l'attribut de mot d'emplacement ( left top right bottom) pour contrôler avec précision sa position. Différentes valeurs d'attribut de positionnement peuvent donner aux éléments différentes formes de présentation.

1.2 Cinq valeurs de l'attribut de position

Les cinq valeurs de l'attribut position précisent le type de positionnement de l'élément :

positionnement statique statique (valeur par défaut, pas de positionnement)
positionnement relatif relatif
positionnement absolu absolu
positionnement fixe fixe
positionnement collant

2. Classement de positionnement

2.1 Position de positionnement statique : statique ;

Positionnement statique : aucune signification de positionnement, l'attribut par défaut du positionnement. Ignorer la valeur d'orientation (en haut à gauche en bas à droite) et le niveau ne peut pas être utilisé

2.2 Position de positionnement relative : relative ;

Il ne se détachera pas du flux documentaire et la position d'origine sera conservée ;
Se déplace par rapport à sa position d'origine. Déplacez-vous avec son coin supérieur gauche comme point de base ;
Ajustez la position via les attributs d'orientation : haut gauche droit bas, valeur d'orientation : pourcentage px, etc. La valeur par défaut est auto, pas 0 ;
Si la position déplacée chevauche d’autres cases, les autres cases seront couvertes.

<style>
        .div1 {
      
      
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .div2 {
      
      
            /* 相对定位：参照的是自己本身原本的位置 */
            position: relative;
            /* 相对自己原本位置，距离左边空出50px，所以可以理解为是向右移动50px
            left:50px等价于right:50px */
            left: 50px;
            width: 200px;
            height: 100px;
            background-color: green;
        }
        .div3 {
      
      
            /* 相对定位 */
            position: relative;
            /* 相对自己原本位置，距离右边边空出50px，所以可以理解为是向左移动50px
            right:50px等价于lfet:-50px */
            right: 50px;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        .div4 {
      
      
            /* 相对定位 */
            position: relative;
            top: 100px;
            width: 200px;
            height: 100px;
            background-color: pink;
        }
        /* 相对定位：不会脱离文档流，自身位置偏移后，原本位置会保留，后面其他元素不会占据它原本的位置 */
        .div5 {
      
      
            /* 没写 position属性，默认就是static。static默认值，没有定位*/
            width: 400px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="div1">我是正常位置的盒子div1</div>
    <div class="div2">相对我自己div2正常位置距离左边空出的距离，可以理解为向右移动</div>
    <div class="div3">相对我自己div3正常位置距离右边空出的距离，可以理解为向左移动</div>
    <div class="div4">我是盒子4，我移动后的位置和其他盒子有重叠的话，我会覆盖其他盒子，但是我的原本位置会得到保留，没有人敢占据</div>
    <div class="div5">我是盒子5，我没写 position属性，默认就是static。static默认值，没有定位</div>
</body>

Le rendu:
Insérer la description de l'image ici

2.3 Position de positionnement absolue : absolue ;

Il se détache du flux documentaire et décolle sur place. La position d'origine n'est plus conservée. D'autres éléments occuperont sa position d'origine et se déplaceront avec la valeur d'orientation.
Déplacement en référence au parent le plus proche et à la position par rapport au parent. Le principe est que son élément parent a un positionnement défini. S'il n'y a pas de positionnement écrit dans la page parent, la référence par défaut est au navigateur, qui est le coin supérieur gauche de son ancêtre, et le mouvement est basé sur le coin supérieur gauche du navigateur.

C'est-à-dire que si son élément parent a un positionnement défini, alors il sera positionné par rapport à son élément parent. Si son élément parent n'a pas de positionnement défini, alors cela dépend si son élément grand-parent a un positionnement défini. Sinon, il suffit de reportez-vous au navigateur pour le positionnement et le mouvement.

Ajustez la position via les attributs d'orientation : haut gauche droite bas
Valeur d'orientation : px/pourcentage, etc. La valeur par défaut est auto au lieu de 0

<style>
        .father1{
      
      
            /* 父级有设置相对定位属性 */
            position: relative;
            width: 300px;
            height: 300px;
            background-color: red;
            margin: auto;
        }
        .son1{
      
      
            /* 绝对定位：参照物是设置有定位属性的最近的父级元素
            子级使用绝对定位属性的前提是：父级有设置定位属性，子级设置的绝对定位属性才能参照父元素生效 */
            position: absolute;
            top: 0px;
            left: 0px;
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: auto;
        }
        .box1{
      
      
            width: 250px;
            height: 250px;
            background-color: yellow;
        }
        .father2{
      
      
            /* 父级没有设置定位属性 */
            width: 300px;
            height: 300px;
            background-color: green;
            margin: auto;
        }
        .son2{
      
      
            position: absolute;
            top: 0px;
            left: 0px;
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: auto;
        }
        .box2{
      
      
            width: 250px;
            height: 250px;
            background-color: yellow;
        }
        .father3{
      
      
            /* 父级有设置定位属性 */
            position: absolute;
            top: 600px;
            left: 400px;
            width: 300px;
            height: 300px;
            background-color: blue;
            margin: auto;
        }
        .son3{
      
      
            position: absolute;
            top: 0px;
            left: 0px;
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: auto;
        }
        .box3{
      
      
            width: 250px;
            height: 250px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="father1">
        <div class="son1">
            我是儿子1，我设置了绝对定位，我的父级元素红色盒子，设置了相对定位属性。我脱离了文档流，我的下一个元素黄盒子占据了我的原本位置
        </div>
        <div class="box1">
        </div>
    </div>

    <div class="father2">
        <div class="son3">
            我是儿子2，我设置了绝对定位，我的父级元素绿色盒子，没有设置定位属性。我脱离了文档流，我的下一个元素黄盒子占据了我的原本位置
        </div>
        <div class="box3">
        </div>
    </div>

    <div class="father3">
        <div class="son3">
            我是儿子3，我设置了绝对定位，我的父级元素蓝色盒子，设置了绝对定位属性。我脱离了文档流，我的下一个元素黄盒子占据了我的原本位置
        </div>
        <div class="box3">
        </div>
    </div>
</body>

Rendu :
Insérer la description de l'image ici
Caractéristiques du positionnement absolu :
1. Marge : auto seul sera inefficace --> Voir Chapitre 4. Méthode 1 pour explication.
2. Si vous ne trouvez pas le positionnement relatif parent le plus proche, vous effectuerez une recherche dans le navigateur.
3. Utilisez la phase parent absolue enfant (phase parent enfant absolu) en conjonction avec notre positionnement relatif.
4. Modifiez les propriétés d'origine de l'élément. étiquette. La largeur et la hauteur de l'élément sont par défaut 0
5. Le pourcentage de largeur hérite de la largeur de positionnement relatif du parent précédent au lieu d'hériter de la largeur de son parent structurel
6. Remarque : les attributs d'orientation gauche et haut ont une priorité plus élevée que droite et bas.

Modifiez les propriétés d'origine de l'étiquette de l'élément. La largeur et la hauteur de l'élément sont par défaut 0 :

<style>
        span{
      
      
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        p{
      
      
            position: absolute;
            height: 100px;
            background-color: red;
        }
</style>
<span>我是行内span元素 ，我设置了绝对定位属性后，改变了我原本的特性，我就可以支持宽高设置了</span>
 <!-- <p>我是块级元素p，我设置了绝对定位属性后，改变了我原本的特性，我的宽度变成了由我的内容撑开了</p> -->

Rendu :
Insérer la description de l'image ici

le pourcentage de largeur hérite de la largeur de positionnement relatif du parent précédent au lieu d'hériter de la largeur de son parent structurel ; les
attributs d'orientation gauche et haut ont une priorité plus élevée que droite et bas.

<style>
    .box {
      
      
            /* position: relative; */
            width: 500px;
            height: 400px;
            background-color: red;
        }

        .son {
      
      
            /*宽度百分比   继承上一个父级的相对定位的宽度  而不是继承它结构上的父级宽度
          子元素son设置宽度设置100%，son的父级是box，如果父级没有设置定位属性的话，所以它就再往上找，找到浏览器做参照，所以此时就继承浏览器的宽度 ，而不是继承它结构上的父级box宽度。如果它的父级box设置了定位属性，它就会继承父级的宽度*/
            position: absolute;
            /* 方位属性 left和top 优先级比  right和bottom 高  */
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            width: 100%;
            height: 200px;
            background-color: green;
        }    
</style>
<div class="box">
        <div class="son">111</div>
</div>

Insérer la description de l'image ici

2.4 Position de positionnement fixe : fixe ;

Ne défilera pas avec votre barre de défilement ;
Il est séparé du flux documentaire et ne prend pas de place. Les éléments suivants occuperont sa position et en seront obscurcis ;
Objet de référence = fenêtre du navigateur pour déplacer la position (cela n'a rien à voir avec le parent, seule la fenêtre du navigateur (fenêtre vue) est utilisée pour se déplacer)
positionnement fixe
La largeur et la hauteur de l'élément sont par défaut 0
marge : auto invalide

2.5 Position de positionnement collante : collante ;

Il ne s'écarte pas du flux documentaire et les éléments ultérieurs n'en seront pas obscurcis.
À l’avenir, js sera utilisé pour compléter l’effet plafond.

<style>
        .header{
      
      
            /* 固定定位 */
            /* position: fixed; */

            /* 粘性定位 */
            position: sticky;
            top: 0px;
            width: 100%;
            height: 70px;
            background-color: #222;
            color: white;
        }
        .wrap{
      
      
            width: 1000px;
            height: 500px;
            border: 2px solid  red;
            margin: 20px auto;
        }

        .nav-right{
      
      
            position: fixed;
            top: 200px;
            right: 0px;
            width: 100px;
            height: 500px;
            background-color: #096;
        }
    </style>
</head>
<body>
     <div class="header">头部</div>
     <div class="wrap">
         我是内容盒子 容器
     </div>
     <div class="wrap">
        我是内容盒子 容器
    </div>
    <div class="wrap">
        我是内容盒子 容器
    </div>
    <div class="wrap">
        我是内容盒子 容器   
    </div>

    <div class="nav-right">
        右侧导航
    </div>
</body>

Rendu de positionnement fixe : l'en-tête et la navigation de droite sont fixes et ne défileront pas lorsque la barre de défilement défile.
Puisqu'elle est séparée du flux de documents, la première ligne de texte dans la zone de contenu occupera la position de l'en-tête, étant ainsi masquée par l'en-tête.
Insérer la description de l'image ici
Rendu de positionnement collant : l'en-tête et la navigation à droite sont fixes et ne défileront pas lorsque la barre de défilement défile.
Elle est séparée du flux de documents, de sorte que la première ligne de texte dans la zone de contenu n'occupe pas la position de tête et est visible.

Insérer la description de l'image ici

3. Niveau de positionnement z-index

Lorsque plusieurs cases se chevauchent, la dernière vient en premier par défaut, et souvent le dernier élément qui se chevauche sera affiché. A ce moment, nous pouvons spécifier l'ordre dans lequel elles sont empilées via l'attribut z-index.

z-index : niveau, le niveau par défaut est 0
Valeur : Plus la valeur est grande, plus la priorité du niveau est élevée.
Généralement, un nombre positif est utilisé pour augmenter le niveau de l'élément spécifié. Bien entendu, un nombre négatif peut également être utilisé pour diminuer le niveau. Qu'il s'agisse d'un nombre positif ou négatif, plus la valeur est grande, plus le niveau est élevé.
Remarque : Au niveau z-index, cet attribut ne prendra effet que lorsqu'il sera utilisé avec des éléments dotés d'attributs de positionnement. Si d'autres zones n'ont pas d'attributs de positionnement définis, il ne prendra pas effet. Le positionnement par défaut ne peut pas non plus être utilisé.

Il s'agissait à l'origine de 4 boîtes ordinaires :
Insérer la description de l'image ici

Ajoutez maintenant un positionnement absolu à chacune de ces quatre cases, puis ajoutez un positionnement relatif à leur case parent. Nous avons constaté que ces quatre cases étaient séparées du flux documentaire et se chevauchaient. Puisque ce sont les retardataires qui arrivent en premier, on ne voit que l’encadré 4 :
Insérer la description de l'image ici

À ce stade, vous pouvez spécifier l'ordre dans lequel ils sont empilés via l'attribut z-index. Par exemple, je souhaite que la deuxième case apparaisse en premier dans l'ordre d'empilement : .list>.son1{z-index: 1;,

Insérer la description de l'image ici

4. Utilisez le positionnement pour centrer l'élément dans le parent

première méthode :

/*关键属性
绝对定位加上四个方位属性一个都不能少
*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

Deuxième méthode :

/*关键属性*/
position: absolute;
top: 50%;
left: 50%;
margin-left: -自身宽度一半;
margin-top: -自身高度一半;

C'est pourquoi le margin:auto mentionné dans 2.3 Fonctionnalités de positionnement absolu ci-dessus ne peut pas être utilisé seul, et il sera inefficace s'il est utilisé seul.

<style>
        .wrap{
      
      
            /* position: relative; */
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto;
            width:500px;
            height: 500px;
            background-color: red;
        }
        .box{
      
      
            /* 第一种 */
            /* position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto; */

            /* 第二种 */
            position: absolute;
            top: 50%;
            left: 50%;
            /* 负自身宽度的一半 */
            margin-left: -150px;
            /* 负自身高度的一半 */
            margin-top: -150px;

            width: 300px;
            height: 300px;
            background-color: springgreen;
        }
    </style>
</head>
<body>
      <div class="wrap">
          <div class="box"></div>
      </div>
</body>

Le rendu:
Insérer la description de l'image ici

Résumer

Ce qui précède est l'attribut de positionnement compilé par l'éditeur pour tout le monde. Il explique les cinq types de positionnement plus en détail. Il ajoute également le niveau de positionnement et la méthode de centrage de l'élément de positionnement dans le parent pour faire une explication plus détaillée basée sur des éléments pertinents. cas.expliquer. Il a été compilé en référence à diverses sources et à ma propre compréhension. S'il peut y avoir des inexactitudes et des omissions, j'espère que vous pourrez m'éclairer et apporter des corrections. Je vous remercie d'avance.