Différentes manières de positionner CSS et leurs différences

Lors de la mise en page frontale, nous utilisons souvent le positionnement. Le positionnement est une partie importante du CSS. Le positionnement est effectué à l'aide de l'attribut position. Les attributs communs sont les suivants :

Valeur Description

absolu Génère un élément à positionnement absolu, positionné par rapport au premier élément parent autre que le 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 haut, bas, gauche, droite 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, nous utilisons ici le modèle de boîte standard, donc chacun doit le considérer 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 dernière valeur de position 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 sur relative sans. compenser.

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. Bloc contenant : 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 comme 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 float
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 ; être généré, qu'il s'agisse ou non d'un élément de niveau bloc.
La différence : le bloc contenant 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 réalité 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/herit
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éments : visible/masqué/effondrement/hériter, la valeur initiale est visible.

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!