Explication détaillée du positionnement et de l'application de positionnement de div+css

Lecture approfondie
* Interprétation de l'absolu et du relatif
* Position : niveau relatif/absolu qui ne peut être brisé
* Supplément à l'article "Le niveau incassable"

Le positionnement a toujours été une difficulté dans l'application des standards WEB. Si le positionnement n'est pas clair, l'effet qui devrait être obtenu risque de ne pas l'être. atteint, et l'effet obtenu peut ne pas être obtenu. Si le principe du positionnement est clarifié, le positionnement rendra la page Web plus parfaite.

La définition du positionnement :

Le contenu sur le positionnement en CSS est : position : relative absolue | statique | 🎜>static n'a pas de paramètres spéciaux et suit les règles de positionnement de base. Il ne peut pas être hiérarchique via z-index.

relatif ne se détache pas du flux de documents, fait référence à sa propre position statique via le positionnement en haut, en bas, à gauche et à droite et peut être hiérarchique via z-index.

Absolute est séparé du flux de documents et positionné en haut, en bas, à gauche et à droite. Sélectionnez son élément de positionnement parent le plus proche. Lorsque la position parent est statique, l'élément absolu sera positionné à l'origine des coordonnées du corps et pourra être classé hiérarchiquement via l'index z.
positionnement fixe fixe, ici l'objet fixe est la fenêtre visuelle plutôt que le corps ou l'élément parent. La classification hiérarchique peut être effectuée via z-index.

Classification en cascade du positionnement en CSS : z-index: auto | namber;

auto suit le positionnement de son objet parent

namber Une valeur entière sans unité. Peut être négatif

Principe de positionnement :

Éléments pouvant être déplacés (positionnement relatif)

Dans le flux de texte, tout élément a sa propre position limitée par le flux de texte, mais grâce au CSS, nous pouvons toujours faire changer leur position à ces éléments. Nous pouvons utiliser float pour faire flotter les éléments, et nous pouvons également utiliser margin pour les faire flotter. ils flottent. L'élément est déplacé. Mais en fait, ce n’est pas là le véritable déplacement, car il s’agit simplement d’une tromperie obtenue en augmentant la valeur de la marge. Le déplacement au sens propre du terme est généré par haut, droite, bas, gauche (ci-après dénommé TRBL, TRBL peut être divisé en deux parties) pour un élément positionné relativement.

Et nous notons que le point de coordonnées de l'élément positionné est au point du bord supérieur gauche de la valeur de marge, qui est le point B dans l'image. Ensuite tous les calculs de déplacement se baseront sur ce point pour pousser l'élément. La direction de déplacement est cohérente lorsque TRBL est positif. On peut en déduire que lorsque TRBL est négatif, la direction du déplacement est vers l’extérieur. Sur l'image, il y a une flèche de déplacement pointant vers la marque. Le signe plus indique la direction de déplacement positive et le signe moins indique la direction de déplacement négative. Concernant le déplacement et l'orientation, vous pouvez lire en outre "Parler de l'attribut de marge du simple au profond (1)" de Yi Fei

Éléments pouvant être à n'importe quelle position (positionnement absolu)

Comme mentionné ci-dessus : le positionnement relatif ne peut déplacer la position que vers le haut, le bas, la gauche et la droite dans le flux de texte. Il présente également certaines limites. Bien que sa zone de présentation soit séparée du flux de texte, elle reste. lui réserve une place dans le flux du texte. C'est comme un travailleur migrant qui part vers un autre endroit, mais qui a toujours une place qui lui est dédiée dans sa ville natale, et cette place ne change pas avec son mouvement. Mais cela laissera évidemment un espace vide. Si vous souhaitez que le flux de texte abandonne cette partie, vous devez utiliser un positionnement absolu. Le positionnement absolu non seulement rompt avec le flux de texte, mais ne laisse pas non plus d'espace exclusif pour cet élément positionné de manière absolue dans le flux de texte. C'est comme un poste dans une usine. Si un travailleur quitte l'entreprise, d'autres travailleurs occuperont naturellement le poste. La partie qui sort devient naturellement un corps libre. Le positionnement absolu définira l'élément dans n'importe quelle position via TRBL. Lorsque la propriété position du calque parent est la valeur par défaut, l'origine des coordonnées de TRBL commence à l'origine des coordonnées du corps.

Positionnement absolu associé

Ce qui précède est un positionnement absolu unique, mais dans les applications réelles, nous devons souvent utiliser un formulaire spécial. Autrement dit, vous souhaitez que l'élément positionné ait des caractéristiques de positionnement absolues, mais vous espérez également que l'origine des coordonnées du positionnement absolu puisse être fixée à un certain point de la page Web. Lorsque ce point est déplacé, l'élément positionné de manière absolue peut garantir. sa position relative par rapport aux coordonnées d'origine. C'est-à-dire que ce positionnement absolu doit se déplacer avec la page Web et être fixé à une position fixe sur la page Web. Habituellement, cet effet est particulièrement important lorsque la page Web est centrée. La méthode de base pour obtenir cet effet consiste à définir le parent en position absolue sur un positionnement relatif ou un positionnement absolu. Ensuite, les coordonnées de positionnement absolu prendront le parent comme point de départ des coordonnées.

Bien que ce soit le cas, l'origine des coordonnées n'est pas l'origine des coordonnées du parent. C'est une position de coordonnées très étrange.

Éléments toujours en vue (positionnement fixe)

En raison d'abus de publicité, certains logiciels de navigation ont commencé à bloquer le contenu publicitaire, ce qui rend certains bons effets déconseillés. Par exemple, un élément peut continuellement changer de position à mesure que la page Web défile. Maintenant, je peux obtenir un tel effet grâce à un attribut de positionnement en CSS. Cet attribut d'élément est position:fixed, qui n'était pas pris en charge dans le passé, sa signification est : positionnement fixe. Cette fixation est très similaire au positionnement absolu. La seule différence est que le positionnement absolu est fixé à une certaine position dans la page Web, tandis que le positionnement fixe est fixé à la position du cadre d'affichage du navigateur.

Bien que le navigateur d'origine ne prenait pas en charge cet attribut, le développement des navigateurs a permis aux navigateurs avancés d'aujourd'hui d'analyser correctement cet attribut CSS. Et grâce à CSS HACK, IE6 peut obtenir cet effet (actuellement IE5.x ne peut pas obtenir cet effet). Afin de ne pas faire de cet article un long article, seul cet exemple est donné ici pour terminer cet article. Vous pouvez analyser vous-même certains problèmes liés à cet exemple. Si vous ne comprenez pas quelque chose, laissez-moi un message !