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

Ce calque applique uniquement la position : relative ; style

Ce calque applique uniquement la position : absolue ;

Aucun style

1. Absolu : n'occupe pas d'espace, relatif : occupe de l'espace !

Comme la structure supérieure :

Le calque avec l'identifiant rel occupera une ligne lorsqu'il sera affiché ! La couche d'abdos derrière ne sera affichée que sur la ligne suivante !
Lorsque le calque avec l'identifiant abs est affiché, il se chevauchera avec le calque avec l'identifiant sss !

2. Par défaut (le positionnement n'est pas combiné avec top, etc.), le positionnement absolu est basé sur le calque parent
Par exemple, si le calque avec l'identifiant abs ci-dessus n'est pas positionné avec top , etc. , alors sa position d'affichage suivra la couche posi parent (posi est dans le coin inférieur gauche du document, et il sera également dans le coin inférieur gauche)

3. , droite, gauche et autres attributs, positionnement absolu) utilise la fenêtre comme positionnement, et relatif utilise sa propre occupation comme ligne de base pour le décalage ! Comme suit :

Aucun style n'est appliqué

Ce calque applique la position : relative ; bas : 30px ; style

Ce calque s'applique uniquement à la position : absolue ; bas : 30px ; >

Le code ci-dessus :
Le calque avec id rel se déplacera vers le haut et se chevauchera avec le calque avec id sss
Le calque avec id abs se déplacera vers une position à 30 pixels de la fenêtre en utilisant la fenêtre comme la ligne de base !

4. Lorsque vous combinez des attributs haut, bas, droite, gauche et autres, si vous souhaitez que le positionnement absolu utilise le calque parent comme ligne de base de positionnement, appliquez simplement l'attribut absolu ou relatif sur le calque parent comme suit ! :







Ce calque applique la position : relatif bas : 30px style

Ce calque s'applique uniquement à la position : absolue ; bas : 30px ; style