Explication détaillée de la position CSS : échange absolu, relatif_Experience

Explication sur le manuel CSS2.0 :

Définir la valeur de cette propriété sur absolue fera glisser l'objet hors du flux normal du document et le positionnera de manière absolue quelle que soit la disposition de son contenu environnant. Si d'autres objets avec des propriétés z-index différentes occupent déjà une position donnée, ils ne s'affecteront pas et se chevaucheront à la même position. À l'heure actuelle, l'objet n'a pas de patch externe (marge), mais il a toujours un patch interne (padding) et une bordure (border).
Pour activer le positionnement absolu d'un objet, vous devez spécifier au moins une des propriétés gauche, droite, haut et bas, et définir la valeur de cette propriété sur absolue. Sinon, les propriétés ci-dessus utiliseront leur valeur par défaut auto , ce qui fera que l'objet obéira aux règles de mise en page HTML normales et sera rendu immédiatement après l'objet précédent.

Les attributs TRBL (TOP, RIGHT, BOTTOM, LEFT) ne sont valides que lorsque l'attribut position est défini.
Lors de la définition de la position : absolue
Si le parent (infini) ne définit pas l'attribut de position, alors l'absolu actuel sera combiné avec l'attribut TRBL pour positionner le coin supérieur gauche du navigateur comme point d'origine
Si le parent (infini) ) pour définir l'attribut de position, alors l'absolu actuel est positionné en utilisant le coin supérieur gauche du parent (le plus proche) comme point d'origine en combinaison avec l'attribut TRBL.

Lorsque position : relative
est définie, le coin supérieur gauche de la zone de contenu parent (la plus proche) est référencé comme le point d'origine et combiné avec l'attribut TRBL pour le positionnement (ou par rapport à l'élément positionné dans la zone de contenu parent L'élément précédent est décalé), s'il n'y a pas de parent, le coin supérieur gauche de BODY est utilisé comme point d'origine. Le positionnement relatif ne peut pas être empilé. Lors de l'utilisation du positionnement relatif, que l'élément soit déplacé ou non, l'élément occupe toujours l'espace d'origine. Par conséquent, déplacer un élément l’amène à recouvrir d’autres cases.

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 de le navigateur comme point d'origine et ne s'adaptera pas aux changements de résolution. Parfois, il est nécessaire de s'appuyer sur l'index z 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.

Définir la valeur de cette propriété sur relative conservera l'objet dans le flux HTML normal, mais sa position peut être décalée en fonction de son objet précédent. Le texte ou les objets suivant un objet positionné relativement occupent leur propre espace sans écraser l'espace naturel de l'objet positionné. En revanche, le texte ou les objets qui suivent un objet positionné de manière absolue occupent son espace naturel jusqu'à ce que l'objet positionné soit retiré du flux normal du document. Placer des objets positionnés de manière absolue en dehors de la zone visible fera apparaître des barres de défilement. Cependant, si un objet positionné relativement est placé en dehors de la zone visible, la barre de défilement n'apparaîtra pas. En fait, le principal problème du positionnement est de retenir la signification de chaque positionnement. Le positionnement relatif est « par rapport à » la position initiale de l'élément dans le flux de documents, tandis que le positionnement absolu est « par rapport » à l'élément ancêtre déjà positionné le plus proche.

Ce qui suit est un supplément :

Bien que je connaisse le positionnement absolu (absolu) et le positionnement relatif (relatif) du CSS, je n'ai jamais écrit moi-même les effets associés .
Après avoir longtemps travaillé, c'est enfin terminé ! J’ai aussi un peu mieux compris ces deux attributs !

Le résumé est le suivant :

Regardons d'abord la structure des couches ci-dessous