1. Quatre valeurs de position : static, relative, absolute, fixed.
Positionnement absolu : absolute et fixed sont regroupés sous le nom de positionnement absolu
Positionnement relatif : relative
Valeur par défaut : static
2. La différence entre le positionnement relatif et le positionnement absolu
Exemple :
Code HTML :
Code CSS :
Effet initial :
1. relative : se déplace par rapport à sa position d'origine. Après avoir défini cette propriété, l'élément reste toujours dans le flux du document et n'affecte pas la mise en page des autres éléments
Définir relative sur la deuxième boîte :
L'élément est décalé par rapport à sa position d'origine, sa largeur et sa hauteur restent inchangées, et il étire le conteneur.
2. absolute : l'élément quittera le flux du document. Si un décalage est défini, il affectera le positionnement des autres éléments
Ne définissez absolute que sur la cinquième boîte :
Explication : Lorsqu'un élément n'a pas de largeur définie, sa largeur est déterminée par le contenu à l'intérieur de l'élément, et l'effet est le même qu'en utilisant la méthode float.
Analyse du principe du positionnement absolu :
1. Lorsque l'élément parent n'a pas défini de positionnement relatif ou absolu, l'élément est positionné par rapport à l'élément racine (c'est-à-dire l'élément html) (cela signifie que l'élément parent ne l'a pas défini).
Donnez maintenant une valeur de décalage à box5 pour vérifier :
2. Lorsque l'élément parent a défini un positionnement relatif ou absolu, l'élément sera positionné par rapport à l'élément parent le plus proche qui a défini un positionnement relatif ou absolu (ou plutôt, positionné par rapport à l'élément parent le plus proche qui n'est pas static, car la valeur par défaut de l'élément est static).
Complément : Certaines personnes en ligne expliquent que l'élément sera positionné par rapport au premier élément parent qui n'est pas static. Je pense que cela peut facilement prêter à confusion. Ce qui précède est ma propre définition.
Donnez maintenant un positionnement absolu à l'élément body (l'élément body est défini sur absolute, la largeur de tout le conteneur est déterminée par le div le plus long, donc la largeur devient plus petite) :
À ce moment, box5 est maintenant positionné par rapport à l'élément body
J'ai mis les deux images ci-dessus — celle positionnée par rapport à l'élément html et celle positionnée par rapport à body — ensemble. D'après la comparaison, vous pouvez voir dans l'image du bas que box5 positionné par rapport à body est plus éloigné du texte box1. Par conséquent, lorsqu'aucun élément parent n'a défini de positionnement relatif ou absolu, un élément avec absolute défini sera positionné par rapport à l'élément racine html.
Code CSS :
Vérifiez maintenant cette affirmation à nouveau :Lorsque l'élément parent a défini un positionnement en relative ou en absolute, l'élément sera positionné par rapport à l'élément parent le plus proche qui a défini un positionnement en relative ou en absolute
Maintenant, enveloppez les boîtes dans trois conteneurs parents, comme suit :
Code HTML :
Les styles CSS des trois conteneurs parents sont les suivants :
L'aspect actuel. Maintenant box5 n'est pas positionné par rapport au premier élément qui n'est pas static comme indiqué (selon cette affirmation, mon box5 devrait maintenant être décalé par rapport au conteneur 1 le plus externe), mais plutôt par rapport à l'élément parent le plus proche qui a défini un positionnement en relative ou en absolute :
Maintenant, mettez en commentaire la position du deuxième conteneur et du troisième conteneur (sans position, définir les valeurs top, left, bottom, right n'a aucun effet), le résultat est le suivant :
Maintenant, le seul élément parent extérieur de box5 qui a défini relative ou absolute est le conteneur 1 le plus externe, donc box5 est maintenant positionné par rapport au conteneur 1 le plus externe. (De toute évidence, box5 s'est déplacé)
Maintenant, mettez uniquement en commentaire la position du troisième conteneur
Le principe est le même. Maintenant, il est positionné par rapport au deuxième conteneur (top: 50px, l'élément parent le plus proche qui a défini un positionnement en relative ou en absolute) :
Les deuxième et troisième conteneurs ci-dessus sont tous deux définis en relative. Maintenant, changez-les en absolute :
Code CSS :
Le principe est le même que pour définir les deuxième et troisième conteneurs en relative, sauf qu'après les avoir définis en absolute, le troisième conteneur quitte le document avec son contenu, donc il n'étire pas la largeur des deux conteneurs extérieurs
Effet actuel :
Ajoutez un autre conteneur à l'extérieur pour vérifier l'effet selon lequel les première et deuxième couches ci-dessus n'ont pas été étirées
La largeur est limitée par la largeur du conteneur parent de la couche supérieure. Élargissez maintenant le conteneur de la première couche, et les deuxième et troisième couches s'élargissent en conséquence, l'effet est le suivant :
Mais s'il y a un long div à l'intérieur du conteneur, le conteneur peut encore être étiré, l'effet est le suivant :
Supplément :
Après que box2 est défini en positionnement absolu, il quitte le flux du document, box3 remonte, et le côté gauche est couvert par box2.
Sur la base de ce qui précède, définissez box3 en absolute. box3 quitte le flux du document (comme si box3 flottait vers le haut, au-dessus de box2), box4 remonte, box3 couvre box2 et une partie de box4.
De même, si box4 est défini en positionnement absolu, il flottera vers le haut et couvrira box3 et box2.
Résumé
relative : le positionnement est relatif à la position de l'élément lui-même(Lors de la définition d'un décalage, il sera décalé par rapport à sa propre position). Un élément avec relative défini reste toujours dans le flux du document, la largeur et la hauteur de l'élément restent inchangées, et la définition d'un décalage n'affectera pas les positions des autres éléments. Lorsque le conteneur le plus externe est défini en positionnement relatif, sans définir de largeur, sa largeur est la largeur totale du navigateur.
absolute : le positionnement est déterminé par rapport à l'élément parent le plus proche qui a défini un positionnement absolute ou relative. Si aucun élément parent n'a défini de positionnement absolute ou relative, l'élément est positionné par rapport à l'élément racine, c'est-à-dire l'élément htmlUn élément avec absolute défini quitte le flux du document. Lorsque l'élément n'a pas de largeur définie, sa largeur est déterminée par le contenu à l'intérieur de l'élément. Après sa sortie, la position d'origine équivaut à être vide, et les éléments en dessous occuperont cette position.
Lien original : http://www.cnblogs.com/yy95/p/5672440.html