Plusieurs façons de se positionner dans les projets front-end

Nous savons que dans les projets front-end, nous nous positionnons via l'attribut de positionnement position, alors quelles valeurs d'attribut spécifiques a-t-il ? Quelles sont les méthodes de positionnement courantes ? Permettez-moi de vous le résumer aujourd'hui.

Description de la valeur

absolu Génère un élément avec un positionnement absolu, positionné par rapport au premier élément parent autre qu'un positionnement statique. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".

fixe Génère des éléments positionnés de manière absolue, positionnés par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".

relative Génère un élément relativement positionné, positionné par rapport à sa position normale. Par conséquent, "left:20" ajoute 20 pixels à la position GAUCHE de l'élément.

Valeur statique par défaut. Sans positionnement, l'élément apparaît dans un flux normal (en ignorant les déclarations top, bottom, left, right ou z-index).

inherit spécifie que la valeur de l'attribut position doit être héritée de l'élément parent.

Tout d'abord, ce que nous utilisons ici est le modèle de boîte standard, donc chacun doit le traiter comme une boîte ou un cadre lors de son analyse. Découvrons d'abord le premier paramètre par défaut static.

statique : le positionnement statique est la valeur par défaut de la position. La boîte d'éléments est générée normalement, c'est-à-dire qu'elle s'affiche normalement sans positionnement.

absolu : les éléments

positionnés de manière absolue sont supprimés du flux de documents et positionnés par rapport au bloc conteneur. L'élément est fermé dans son espace d'origine. Une boîte de niveau bloc est générée après le positionnement de l'élément, qu'il s'agisse à l'origine d'un élément en ligne ou d'un élément de niveau bloc.

Le bloc contenant fait ici référence à l'élément ancêtre (niveau bloc ou en ligne) dont la valeur de position récente n'est pas statique. Généralement, un élément est désigné comme le bloc contenant de l'élément positionné de manière absolue et sa position est définie. au relatif et il n'y a pas de décalage.

fixe : positionnement fixe L'élément

est détaché du flux de texte, supprimé du texte normal et positionné par rapport à la fenêtre du navigateur, de sorte qu'il ne bouge pas lorsque le document défile. L'élément est fermé dans son espace d'origine. Une boîte de niveau bloc est générée après le positionnement de l'élément, qu'il s'agisse à l'origine d'un élément en ligne ou d'un élément de niveau bloc. La seule différence avec le positionnement absolu est le bloc conteneur.

Contient le bloc : fenêtre du navigateur.

relatif : Positionnement relatif

Positionnement relatif, les façons les plus courantes de l'utiliser sont les suivantes :

Méthode d'utilisation 1 : L'élément est décalé d'une certaine distance par rapport à sa position d'origine, mais l'espace d'origine est toujours conservé et apparaît vide.

Méthode d'utilisation deux : définissez un élément sur position : relative ; pour que les éléments enfants de l'élément soient positionnés de manière absolue par rapport à l'élément.

Comparaison entre absolu/fixe et flottant

La même chose : les éléments seront séparés du flux de texte et supprimés du texte ordinaire, mais cela affectera toujours la mise en page au niveau du bloc ; box sera généré, quel que soit l'élément d'origine. Il ne s'agit pas d'un élément de niveau bloc.

La différence : le bloc conteneur de float est l'élément ancêtre au niveau du bloc le plus proche.

Définissez les attributs de décalage : haut/droite/bas/gauche, la valeur initiale est auto.

Après avoir utilisé le positionnement, vous devez utiliser l'attribut offset pour définir le décalage, qui est le décalage par rapport au bloc conteneur. Ce à quoi vous devez faire attention lors de son utilisation, c'est que l'élément définissant le décalage doit être un élément dont la valeur de position n'est pas statique.

Parfois, il est également nécessaire de définir la largeur et la hauteur, mais cela peut entrer en conflit avec la définition de l'attribut offset, car les quatre attributs offset définissent en fait la taille de l'élément. À ce stade, la gauche et la droite sont définies en fonction des attributs width et left, et le haut et le bas sont définis en fonction des attributs top et height.

Une autre propriété en CSS. Ensuite, le débordement de contenu : overflow.

Habituellement, l'attribut de débordement de contenu a les valeurs suivantes :

overflow: visible/ Hidden/ scroll /auto/ hériter

La valeur initiale du débordement est visible.

Le débordement est ce que nous utilisons souvent : si la taille d'un élément est fixe, mais que son contenu ne peut pas tenir, cela provoquera un débordement. Le débordement contrôle la visibilité, l'invisibilité (cachée) et la visibilité de défilement (défilement) de la partie de débordement.

Visibilité des élémentsvisibilité : visible/ masqué/ réduire/ hériter, la valeur initiale est visible.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Tutoriel pour rendre la largeur div adaptative

Comment changer le style de survol de la souris sans utiliser CSS

Comment optimiser les pages Web HTML

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!