Différence entre le positionnement statique et relatif
En CSS, quelle est la différence entre le positionnement statique (par défaut) et le positionnement relatif?
Le positionnement statique est le modèle de positionnement par défaut des éléments. Ils sont affichés dans la page où ils sont restitués dans le cadre d'un flux HTML normal. Les éléments positionnés statiquement n'obéissent pas aux règles left, top, right et bottom:
Le positionnement relatif vous permet de spécifier un décalage spécifique (left, top etc) qui est relatif à la position normale de l'élément dans le flux HTML. Donc, si j'ai une zone de texte à l'intérieur d'un div je pourrais appliquer un positionnement relatif sur la zone de texte pour qu'il s'affiche à un endroit spécifique par rapport à l'endroit où il serait normalement placé dans le div:
Il existe également un positionnement absolu - par lequel vous spécifiez l'emplacement exact de l'élément par rapport à l'ensemble du document, ou l'élément suivant relativement positionné plus haut dans l'arborescence des éléments:
Et quand un position: relative est appliqué à un élément parent dans la hiérarchie:
Notez comment notre élément de position absolue est lié par l'élément de position relative.
Et enfin, il est fixe. Le positionnement fixe restreint un élément à une position spécifique dans la fenêtre, qui reste en place pendant le défilement:
Vous pouvez également observer le comportement selon lequel les éléments à position fixe ne provoquent pas de défilement car ils ne sont pas considérés comme liés par la fenêtre:
Alors que les éléments absolument positionnés sont toujours liés par la fenêtre et provoqueront le défilement:
..à moins bien sûr que votre élément parent utilise overflow: ? pour déterminer le comportement du défilement (le cas échéant).
Avec un positionnement absolu et un positionnement fixe, les éléments sont retirés du flux HTML.
Vous pouvez voir un aperçu simple ici: W3School
De plus, si je me souviens bien, lors de la déclaration d'un élément relatif, il restera par défaut au même endroit qu'il le devrait autrement, mais vous gagnez la possibilité de positionner absolument des éléments à l'intérieur par rapport à cet élément, ce que j'ai trouvé très utile autrefois.
Position relative vous permet d'utiliser le haut/bas/gauche/droite pour le positionnement. La statique ne vous permettra pas de le faire à moins d'utiliser des paramètres de marge. Il y a une différence entre Top et margin-top.
Vous n'aurez pas besoin d'utiliser beaucoup d'électricité statique comme par défaut
En réponse à "pourquoi CSS implémenterait toujours position: static;" dans un seul scénario, utiliser position: relative pour un parent et position: absolue pour l'enfant limite la largeur de mise à l'échelle de l'enfant. Dans un système de menu horizontal, où vous pourriez avoir des "colonnes" de liens, l'utilisation de "width: auto" ne fonctionne pas avec les parents relatifs. Dans ce cas, le changer en "statique" permettra à la largeur d'être variable en fonction du contenu qu'il contient.
J'ai passé quelques heures à me demander pourquoi je ne pouvais pas ajuster mon conteneur en fonction de la quantité de contenu qu'il contenait. J'espère que cela t'aides!
Matthew Abbott a une très bonne réponse.
Les éléments positionnés absolus et relatifs obéissent aux commandes (décalages) top, left, right et bottom (décalages), contrairement aux éléments positionnés statiques.
Les éléments relativement positionnés déplacent les décalages par rapport à leur emplacement normal dans le html.
Les éléments positionnés en absolu déplacent les décalages par rapport au document ou à l'élément relativement positionné suivant dans l'arborescence DOM.
La position relative est relative au débit normal. La position relative de cet élément (avec décalages) est relative à la position où cet élément aurait été normalement s'il n'avait pas été déplacé.
Statique: Un élément positionné STATIQUE est ce que nous obtenons par DEFAUT (Positionnement normal des objets).
Relative: Relative à sa position actuelle, mais peut être déplacée. Ou un élément positionné RELATIF est positionné par rapport à lui-même.