Quel est le positionnement du CSS ? Résumé du positionnement CSS

Ce que cet article vous apporte, c'est quel est le positionnement du CSS ? Le résumé du positionnement CSS a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile.

Le positionnement est divisé en :

statique (par défaut) : Ce est la valeur par défaut de l'attribut position des éléments de la page. Les éléments seront disposés selon les règles de disposition du navigateur pour les éléments de la page Web.

Remarque : Le réglage de la gauche, de la droite, du haut et du bas de l'élément à ce moment n'a aucun effet.

relatif (positionnement relatif) : Positionnement par rapport à sa position d'origine ! Si la position n'a pas été définie auparavant ou si la valeur de position est statique, alors après avoir défini une valeur relative, les positions gauche, droite, haut et bas de l'élément seront déplacées par référence à la position d'origine de .

absolu (positionnement absolu) : Tout le monde devrait être familier avec cela, c'est-à-dire un positionnement séparé du flux documentaire. L'objet de référence de positionnement est son propre parent, mais son propre parent doit avoir l'attribut position (cela ne fonctionne pas si l'attribut position du parent est statique, il doit être absolu, relatif et fixe). Si son parent ne définit pas l'attribut position, il recherchera vers le haut les éléments ancêtres qui ont un attribut position et ne sont pas statiques, jusqu'à l'élément body.

fixe (positionnement fixe) : Cet attribut positionne l'élément par rapport à la fenêtre du navigateur Peu importe la façon dont vous déplacez votre curseur, il sera corrigé. position fixe par rapport à la fenêtre du navigateur, notez également que ses éléments frères ignoreront sa présence dans le positionnement. Les parties supérieure, inférieure, gauche et droite utilisées à ce moment sont également relatives à la fenêtre du navigateur.

Permettez-moi de partager mon expérience ci-dessous :

1. Le correctif entraînera des problèmes de compatibilité. L'ancien IE6 ne le prend pas en charge. Il est positionné par rapport au navigateur !

2. L'élément parent a un attribut de position (non statique) et une valeur de remplissage si l'élément enfant définit uniquement une valeur absolue, alors n'ignorera pas la valeur de remplissage de l'élément parent . Si left: 0 est défini, top:0 ignorera la valeur de remplissage de l'élément parent.

3. Partagez la méthode de centrage horizontal d'un élément avec l'attribut absolu :

Méthode 1 : Normalement, nous utilisons left : 50%, puis margin-left : -width/2 Pour définir la centrage horizontal, je partagerai une autre méthode ci-dessous. Si on vous pose des questions sur la méthode de centrage horizontal lors de l'entretien, vous pouvez ajouter la méthode suivante, des points supplémentaires !

Méthode 2 : Définissez les éléments enfants : gauche : 0, droite : 0, puis définissez margin : 0 auto pour le centrer horizontalement.

4. Tout le monde doit faire attention aux changements qui se produiront lors de la définition du flotteur et de la marge après la définition de la position. Ceci est très important et sera discuté avec vous plus tard.

Recommandations associées :

Attributs d'animation CSS3 : Introduction à l'attribut transform

Code d'implémentation des boîtes à bulles avec des pseudo-éléments en CSS3 ( avant, après)

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!