Comprendre l'absolu et le relatif_CSS/HTML en CSS

De nombreux amis m'ont demandé comment distinguer l'absolu du relatif et comment les utiliser ? Nous savons tous qu'absolu est un positionnement absolu et relatif est un positionnement relatif, mais que signifient absolu et relatif ? Qu'est-ce que l'absolu, et le relatif est relatif à 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; TOP, RIGHT, BOTTOM, LEFT (ci-après dénommé TRBL) pour le positionnement. Si TRBL n'est pas défini, la valeur par défaut est basée sur 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.

Relatif, la méthode d'écriture en CSS est : position:relative; Cela signifie un positionnement relatif absolu. Il fait référence au point d'origine du parent comme point d'origine. S'il n'y a pas de parent, le point d'origine de BODY est utilisé comme. le point d'origine, en conjonction 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 est positionné par rapport au point d'origine de la zone de contenu parent.

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. 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.