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 rendus dans le cadre du flux HTML normal. Éléments positionnés statiquement n'obéissent pas left, top, rightet bottomrègles:

Le positionnement relatif vous permet de spécifier un décalage spécifique ( left, topetc.) 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'une, divje pourrais appliquer un positionnement relatif sur la zone de texte pour qu'elle s'affiche à un endroit spécifique par rapport à l'endroit où elle serait normalement placée dans div:

Il existe également un positionnement absolu - dans lequel vous spécifiez l'emplacement exact de l'élément par rapport à l'ensemble du document, ou l'élément suivant positionné relativement plus haut dans l'arborescence des éléments :

Et quand a position: relativeest appliqué à un élément parent dans la hiérarchie:

Notez comment notre élément de position absolue est lié par l'élément relativement positionné.

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 positionnés de manière absolue sont toujours liés par la fenêtre et provoquent un défilement:

..à moins que votre élément parent ne l'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 sortis 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.

En réponse à "pourquoi CSS implémenterait toujours position: static;" dans un scénario, en utilisant position: relative pour un parent et position: absolute 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 à l'intérieur.

J'ai passé quelques heures à me demander pourquoi je ne pouvais pas ajuster mon conteneur en fonction de la quantité de contenu qu'il contient. J'espère que cela t'aides!

La position relative vous permet d'utiliser haut / bas / gauche / droite pour le positionnement. Static ne vous permettra pas de faire cela à moins que vous n'utilisiez des paramètres de marge. Il y a une différence entre Top et margin-top.

Vous n'aurez pas besoin d'utiliser beaucoup de statique car c'est par défaut

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

Matthew Abbott a une très bonne réponse.

Absolu et articles relatifs obéissent positioned top, left, rightet bottomcommandes (décalages) où les éléments positionnés de statiques ne le font pas.

Les éléments relativement positionnés déplacent les décalages par rapport à l'endroit où ils se trouveraient normalement dans le code HTML.

Les éléments positionnés absolus déplacent les décalages du document ou du prochain élément relativement positionné vers le haut de l'arborescence DOM.

Statique: Un élément positionné STATIQUE est ce que nous obtenons par DEFAULT (Positionnement normal des objets).

Relative: par rapport à sa position actuelle, mais peut être déplacée. Ou Un élément positionné RELATIF est positionné par rapport à LUI-MÊME.

static et relative sont des attributs de position.relative est utilisée pour de nombreuses utilisations. Pas pour un seul. Mais gardez à l'esprit que statique et relatif ne nuisent pas au flux de documents normal du Html. static est la position par défaut que lorsque vous écrivez un élément en Html. Si un élément a une position relative, cet élément peut être positionné par rapport à son emplacement d'origine. lorsque vous souhaitez ajuster l'élément à partir de petits espaces, utilisez la position relative de sorte que vous n'ayez pas besoin d'ajouter la marge, le remplissage, etc. si l'élément a une position relative et qu'il a un élément enfant. Ici, nous pouvons faire des mesures par rapport à son parent. Si vous ajoutez une largeur de 10% à l'enfant, cela signifie (largeur + remplissage) x10%, mais vous n'ajoutez pas le mot-clé relatif, vous obtenez une largeur de 10%. Autre que cela, l'utilisation la plus importante du parent est; vous pouvez placer n'importe quel élément dessus.