Analyse sur le positionnement absolu (absolute) et le positionnement flottant (float)

Cet article présente principalement l'analyse du positionnement absolu (absolu) et du positionnement flottant (float). Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Positionnement absolu. Le flottement peut également être utilisé pour obtenir des effets de colonne. Les deux peuvent être utilisés indépendamment ou combinés pour se compléter.

En CSS, il existe deux façons d'implémenter la disposition des colonnes. La première méthode consiste à utiliser le positionnement absolu (positionnement absolu) parmi les quatre options de positionnement CSS (absolu, statique, relatif et fixe), qui permet de supprimer un élément du document de sa position d'origine et de le repositionner n'importe où. La seconde consiste à utiliser le concept float en CSS.

Un positionnement absolu ou flottant peut être utilisé pour obtenir l'effet de colonne. Les deux peuvent être utilisés indépendamment ou combinés pour se compléter.

1. Positionnement absolu

L'avantage du positionnement absolu est que nous pouvons contrôler avec précision la position de n'importe quel élément - il n'y a pas de devinettes ni de chance. Étant donné qu'un élément positionné de manière absolue est complètement supprimé du flux de documents habituel sans laisser de trace, il n'a aucun impact sur les autres éléments.

Essayons donc de mettre en œuvre la disposition suivante en utilisant le positionnement absolu.

Il s'agit d'une mise en page à trois colonnes et centrée. Parmi elles, la colonne A est la colonne de contenu principale et les colonnes B et C sont des colonnes secondaires. Tout d'abord, nous ne pouvons pas utiliser directement le positionnement absolu pour positionner les trois colonnes A, B et C en position centrale, car la résolution du moniteur de chaque personne est différente. L'effet de centrage du positionnement sur un moniteur avec une résolution de 1024X768 sera. ne fonctionnera pas à d'autres résolutions. L'effet observé sur un moniteur haute vitesse ne sera certainement pas centré, alors comment résoudre ce problème ?

Heureusement, il existe une fonctionnalité extrêmement utile dans le modèle de positionnement absolu, c'est-à-dire : si un certain Le conteneur d'un élément positionné de manière absolue a également été positionné, alors les valeurs supérieure et gauche spécifiées par l'élément ne seront pas calculées en fonction de l'élément racine html du document (c'est-à-dire le coin supérieur gauche de la fenêtre du navigateur), mais sera basé sur le coin supérieur gauche de son conteneur. Calculez ce décalage. En d’autres termes, c’est-à-dire : le conteneur positionné servira de point de départ pour le positionnement absolu de tous les éléments qu’il contient.

Donc, en utilisant cette fonctionnalité, nous ajoutons un conteneur D en dehors des colonnes A, B et C, comme indiqué ci-dessous :

Ensuite, nous laissons Container D est centré et un attribut y est ajouté : position:relative De cette façon, en utilisant le positionnement absolu pour positionner les valeurs supérieure et gauche de A, B et C, les positions de A, B et C. sera basé sur le coin supérieur gauche du conteneur D. La position est calculée, afin que nous puissions obtenir l'effet de centrage des trois colonnes attendu.

Cependant, notre mise en page couramment utilisée n'est pas si simple. En plus de trois colonnes, nous avons également besoin d'un en-tête et d'un pied de page, comme indiqué ci-dessous :

À ce stade, l'utilisation d'une mise en page en position absolue ne fonctionnera pas, car l'élément en position absolue sera complètement supprimé du flux de documents. À ce stade, le pied de page sera à côté de l'en-tête et affiché sous l'en-tête.

Si nous devons utiliser le positionnement absolu, nous devons connaître à l'avance la hauteur de chacune des trois colonnes, puis positionner le pied de page en fonction de la colonne la plus haute. Si la longueur du texte dans une colonne ne peut pas être déterminée, en plus d'utiliser JavaScript, nous ne pouvons qu'abandonner l'idée d'un positionnement absolu et investir à la place dans l'adoption d'une mise en page flottante.

2. Flottant

L'intention initiale du flottement est de faire flotter l'image insérée dans l'article vers la gauche ou la droite, de sorte que le texte sous l'image s'enroule automatiquement autour d'elle, de sorte que le côté gauche de l'image. Ou il n'y aura pas un grand espace vide sur le côté droit.

Bien que la syntaxe du flottant soit simple, elle n'est pas si facile à maîtriser. Donnons un exemple de la façon d'utiliser le flottant pour la mise en page. De même, nous allons implémenter une mise en page à trois colonnes avec un pied de page. Comme indiqué ci-dessous :

Comment utiliser le flottant pour obtenir un tel effet ? C'est en fait très simple :

1. centre E

2 Définissez la largeur de A, B et C, et flottez A, B et C respectivement vers la gauche

3. Définissez l'attribut clair pour le pied de page

Il convient de noter que la mise en page flottante suit toujours le flux normal du document, donc par rapport au positionnement absolu, la position de la déclaration de l'élément dans le fichier source HTML est particulièrement importante lors du positionnement flottant. Bien entendu, le moyen le plus simple de résoudre ce problème consiste à échanger l'ordre de déclaration de la colonne de gauche et de la colonne de droite dans le fichier source. Il existe également des moyens d'obtenir la même disposition sans échanger l'ordre des colonnes. l'utilisation d'une comparaison Manière obscure d'utiliser des valeurs de marge négatives. Dans des circonstances normales, les utilisateurs choisiront très probablement d'échanger l'ordre des déclarations dans les colonnes de gauche et du milieu du fichier source.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la méthode adaptative de CSS pour implémenter une largeur fixe à droite et une largeur à gauche

À propos de l'analyse HTML de l'attribut rel dans

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!