Introduction détaillée aux trois positionnements CSS : positionnement régulier, flottant et absolu

Cet article décrit les trois conventions de positionnement CSS, Flottant, Positionnement absoluDétails

Flux régulier, flux normal Flux , flux de documents

La méthode normale d'affichage du flux régulier est la suivante

Affichage selon les caractéristiques normales de l'élément correspondant , les éléments en ligne occupent une ligne et les éléments de niveau bloc occupent une ou plusieurs lignes.

Le frère aîné, le deuxième frère et le troisième frère sont disposés dans l'ordre de haut en bas selon des éléments au niveau du bloc. C'est le flux régulier.

Flottant

Comme son nom l'indique, flotter flotte au-dessus du flux régulier. Fonction : résolvez le problème du placement de plusieurs boîtes sur une seule ligne (normalement, la boîte suivante n'occupe qu'une seule ligne, plusieurs boîtes occupent plusieurs lignes), et les boîtes sont hautement contrôlables.

Caractéristiques flottantes : les éléments flottants seront alignés ci-dessus une fois triés.

float:gauche;

Le frère aîné ne flotte pas, il sera donc dans le position du deuxième frère Alignement.

Le flottement n'affectera pas le débit standard, et le débit standard sera toujours à sa position d'origine. Le quatrième frère ici n'a pas de cadre flottant et est très haut. La petite rangée au-dessus est couverte par le frère aîné et les autres, mais le quatrième frère occupe toute la rangée. Les trois autrestrois frères flottent sur son corps.

Le float sera donc superposé sur le flux standard.

Classement flottant

Quand il y a plusieurs boîtes flottantes et non flottantes ensemble Quand apparaissant sur la page, les cases flottantes seront alignées avec les cases flottantes, et les cases non flottantes seront alignées avec les cases non flottantes selon le flux normal.

Floating changera le mode d'affichage de l'élément - cela changera le mode d'affichage de l'élément en : inline-block;

left et right n'affecteront que le disposition des éléments flottants précédents Position, s'il y a plusieurs éléments flottant à la même position, alors le flotteur gauche recherchera le flotteur gauche et le flotteur droit recherchera le flotteur droit.

Quelle est la position en fonction de laquelle le flotteur flotte ?

Si un élément flottant n'est pas trouvé, analysez-le sous la forme d'un flux standard

Si un élément flottant est trouvé, il l'analysera selon des règles flottantes. La position de l'élément après le flottement est la position du flux standard où il se trouve, et il écrasera le flux standard.

Positionnement absolu

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!