Interprétation de l'échange absolu et relatif_Expérience

Blog de l'auteur Xiaoyi : http://andymao.com/

Beaucoup d'amis m'ont demandé comment distinguer l'absolu du relatif et comment les utiliser ? Nous savons tous qu'absolu signifie positionnement absolu et relatif signifie positionnement relatif, mais que signifient absolu et relatif ? Où est l'absolu, et par rapport à quoi ? Alors, quelles sont leurs caractéristiques et quels effets peuvent-elles produire ? Quels types de compétences y a-t-il entre les deux ? Expliquons-les un par un ci-dessous.

Absolu, la méthode d'écriture en CSS est : position:absolute; Cela signifie un positionnement absolu. Il fait référence au coin supérieur gauche du navigateur et coopère avec TOP, RIGHT, BOTTOM et LEFT (ci-après dénommé TRBL) pour. positionnement. S'il n'y a pas de paramètre, définissez TRBL, qui est par défaut le point d'origine du parent. Si TRBL est défini et que le parent ne définit pas l'attribut de position, alors l'absolu actuel sera positionné avec le coin supérieur gauche du navigateur comme point d'origine et la position sera déterminée par TRBL.

De manière générale, si vous utilisez Absolute pour centrer la page Web, il est facile de faire des erreurs, car la page Web s'est toujours automatiquement adaptée à la taille de la résolution, et Absolute utilisera le coin supérieur gauche du navigateur comme le point d'origine, pas la résolution, change de position en raison des changements. C’est là que beaucoup de gens se trompent. Les caractéristiques de la page Web de gauche sont très similaires à celles de Relative, mais il existe encore des différences essentielles.

Relative, la méthode d'écriture en CSS est : position:relative; Cela signifie absolu relatif positionnement, il fait référence au point d'origine du parent comme point d'origine, sans parent Utilisez ensuite le point d'origine de BODY comme point d'origine et coopérez avec TRBL pour le positionnement. Lorsqu'il y a des attributs CSS tels que le remplissage dans le parent, le point d'origine du niveau actuel sera positionné par référence au point d'origine du parent. zone de contenu.

Parfois, nous devons également nous fier au z-index pour définir la relation supérieure et inférieure du conteneur. Plus la valeur est grande, plus elle est élevée en haut. La plage de valeurs est un nombre naturel. Bien sûr, une chose à noter est que la relation parent-enfant ne peut pas être configurée à l'aide de z-index. L'enfant doit être en haut et le parent doit être en bas.