Positionnement en H5

Cette fois je vais vous apporter le positionnement en H5. Quelles sont les précautions pour le positionnement en H5. Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. Classification des flux de positionnement

1.1 Positionnement relatif
1.2Positionnement absolu
1.3 Positionnement fixe
1.4 Positionnement statique

2. Qu'est-ce que le positionnement relatif ?

Le positionnement relatif consiste à se déplacer par rapport à votre position précédente dans le flux standard
position : relative ;

Points de positionnement relatif à noter

1. Le positionnement relatif ne se détache pas du flux standard et continuera à occuper un espace dans le flux standard
2 En positionnement relatif, un seul (c'est-à-dire, utilisez Si vous utilisez la gauche, n'utilisez pas la droite ; si vous utilisez le haut, n'utilisez pas le bas).
3. Puisque le positionnement relatif ne s'écarte pas du flux standard, bloquez. -les éléments de niveau/éléments en ligne se distinguent dans le positionnement relatif Élément/élément de niveau bloc en ligne
4. Étant donné que le positionnement relatif ne s'écarte pas du flux standard et que les éléments positionnés relativement occuperont des positions dans le flux standard, lors de la définition d'attributs tels que comme marge/remplissage pour les éléments positionnés relativement, cela affectera la disposition du flux standard,(la marge/remplissage sera ajouté à la position de la boîte avant le positionnement)

Positionnement relatif scénario d'application

1. Utilisé pour affiner les éléments
2. Utilisez-le avec le positionnement absolu que vous apprendrez plus tard

       .box2{
            background-color: green;
            position: relative; //相对定位
            top: 20px;
            left: 20px;
            margin-top: 20px;//会加在定位之前的位置上
        }

3. Qu'est-ce que le positionnement absolu

Le positionnement absolu signifie le positionnement

position par rapport au corps : absolu;

Notes

1 Les éléments positionnés de manière absolue sont hors du flux standard

2 Les éléments positionnés de manière absolue ne le sont pas faire la distinction entre les éléments au niveau du bloc/les éléments en ligne/les éléments au niveau du bloc en ligne

.box2{
            background-color: green;
            position: absolute; //绝对定位
            left: 0;
            bottom: 0; //在body的左下角
        }

4. Point de référence de positionnement absolu

Règles

1 Par défaut, tous absolument. Les éléments positionnés, qu'ils aient ou non des éléments ancêtres, utiliseront le corps comme point de référence

2. Si un élément positionné de manière absolue a un élément ancêtre et que l'élément ancêtre est également un flux de positionnement, alors le L'élément positionné de manière absolue utilisera l'élément ancêtre du flux de positionnement comme point de référence

2.1 Tant qu'il est l'élément ancêtre de cet élément positionné de manière absolue, il peut

2.2 Le flux de positionnement fait référence au positionnement absolu/positionnement relatif/positionnement fixe

2.3 Seul le positionnement statique dans le flux de positionnement ne fonctionnera pas

3 Si un élément positionné de manière absolue a un élément ancêtre et que l'élément ancêtre l'est également. un flux de positionnement, et il y a plusieurs éléments dans l'élément ancêtre qui sont des flux de positionnement, alors l'élément positionné de manière absolue utilisera le flux de positionnement le plus proche de lui. L'élément ancêtre est le point de référence

5. Notes

1. Si un élément positionné de manière absolue utilise le corps comme point de référence, alors il utilise en fait la largeur et la hauteur du premier écran de la page Web comme point de référence, au lieu d'utiliser la largeur et la hauteur de l'ensemble. page Web comme point de référence ;

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Méthode de mise en page des pages Web - Clear Floats

Modèle de boîte HTML et CSS

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!