La différence entre le statique et le positionnement relatif

Question

Dans le CSS, quelle est la différence entre statique (par défaut) de positionnement et de positionnement relatif?

Answer 1

Positionnement statique par défaut est le modèle de positionnement des éléments. Ils sont affichés dans la page où il est rendu dans le cadre de la normale du flux HTML. Statique des éléments en position de ne pas obéir left, top, right et bottom règles:

Le positionnement relatif permet de spécifier un décalage (left, top etc) qui est relative à celle de l'élément à la position normale dans le flux HTML. Donc, si j'ai une zone de texte à l'intérieur d'un div je pourrais appliquer le positionnement relatif sur la zone de texte à afficher à la place spécifique par rapport à l'endroit où il devrait normalement être placé à l'intérieur de l' div:

Il y a aussi le positionnement absolu - dans lequel vous spécifiez l'emplacement exact de l'élément par rapport à l'ensemble du document, ou la prochaine position relative de l'élément de plus haut dans l'arbre de l'élément:

Et quand un position: relative est appliquée à un élément parent dans la hiérarchie:

Notez comment notre absolument position de l'élément est lié par la relativement positionné sur l'élément.

Et enfin il est fixé. Correction du positionnement limite d'un élément à une position spécifique dans la fenêtre d'affichage, qui reste en place au cours de défilement:

On peut également observer le comportement qui fixe les éléments en position de ne pas causer de défilement parce qu'ils ne sont pas considérés comme liés par la fenêtre:

Alors que les éléments à positionnement absolu sont encore liés par la fenêtre d'affichage et sera la cause de défilement:

..à moins bien sûr de votre élément parent utilise overflow: ? pour déterminer le comportement du défilement (le cas échéant).

Avec le positionnement absolu et fixe le positionnement, les éléments sont pris hors de flux HTML.

Answer 2

Vous pouvez voir un aperçu ici: W3School

Aussi, si je me souviens bien, lors de la déclaration d'un élément relatif, il sera par défaut à rester à la même place, comme il se doit, mais vous gagnez la possibilité de absolument la position des éléments à l'intérieur relativement à cet élément, que j'ai trouvé très utile dans le passé.

Answer 3

Position par rapport vous permet d'utiliser le haut/bas/gauche/droite pour le positionnement. Statique de ne pas vous laisser faire cela, sauf si vous utilisez des paramètres de couverture. Il y a une différence entre le Haut et le margin-top.

Vous n'aurez pas besoin d'utiliser statique comme elle l'est par défaut

Answer 4

La position Relative est relative à la circulation normale. La position relative de l'élément (avec des décalages) est relative à la position où cet élément aurait été normalement si pas déplacé.