Différence entre le positionnement statique et relatif


89

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


21
Une différence est que vous tapez fréquemment position: relative, et vous ne tapez jamaisposition: static :)
thirtydot

Réponses:


168

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:

Les éléments positionnés statiquement obéissent au flux HTML normal.

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:

les éléments relativement positionnés obéissent au flux HTML, mais offrent la possibilité d'ajuster leur position par rapport à leur position normale dans le flux HTML.

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 :

les éléments positionnés de façon absolue sont sortis du flux HTML et peuvent être positionnés à un endroit spécifique du document ...

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

... ou positionné par rapport au premier élément parent de l'arborescence HTML qui est relativement positionné.

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:

Les éléments à position fixe sont également sortis du flux HTML, mais ne sont pas liés par la fenêtre d'affichage et ne défileront pas avec la page.

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:

les éléments à position fixe n'ont aucun effet sur le défilement.

Alors que les éléments positionnés de manière absolue sont toujours liés par la fenêtre et provoquent un défilement:

les éléments positionnés de manière absolue sont toujours affectés par les limites de la fenêtre, sauf si le débordement est utilisé sur un élément parent.

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


4
Bonne réponse, mais (pour la position relative) le décalage n'est-il pas basé sur la position normale de l'élément?
Baztoune

4
Je suis d'accord avec Baztoune, cette définition d'éléments relativement positionnés est trompeuse. Un staticet un relativeélément sont identiques, sauf qu'avec ce dernier, vous pouvez le repositionner par rapport à sa position d'origine , pas à l'élément contenant - c'est là absolutequ'intervient. De même, comme tout élément positionné à l'aide d'une valeur autre que celle que staticvous pouvez utiliser z-index.
Ryan Williams

J'ai retravaillé cette réponse pour définir plus précisément le positionnement relatif et j'ai inclus des images pour démontrer les différents types de position.
Matthew Abbott

3
Je me demande pourquoi CSS implémenterait toujours position: static;au lieu de simplement le remplacer position: relative;par défaut? Si on ne veut pas positionner un élément autre que top: 0;et left: 0;alors ne le faisons pas, non? Y a-t-il une raison sous-jacente pour laquelle position: static;est toujours requis dans le cadre de CSS?
cram2208

8
@ cram2208 parce que relative permet aux enfants de positionner les nœuds absolus par rapport à eux, static permet aux enfants positionnés de manière absolue d'ignorer leur position et d'être positionnés par rapport à l'élément positionné relatif le plus proche. C'est un concept important à avoir
Felype

7

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.


29
w3schools ... Je ne voterai pas contre cela mais vous devez vivre avec la honte.
Myles Grey

4
Pendant ce temps, en 2017, W3Schools n'est pas aussi mauvais qu'avant (ce n'est toujours pas parfait, mais ils ont pris la réaction de la communauté au sérieux et se sont améliorés).
Priidu Neemre

Pendant ce temps, en 2018, W3Schools n'est toujours pas aussi mauvais qu'avant, mais sentez-vous mal pour eux que leur réputation, même aujourd'hui, soit toujours telle que mentionner le premier commentaire ci-dessus à d'autres développeurs, obtient toujours un rire classique ... retour dans ma journée ... W3School .... premières impressions hey ...
redfox05

7

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!


C'est LA réponse! Tout le monde ne dit aux pros que le positionnement relatif, manquant le point dans une question comme celle-ci: quelle est la différence.
Bartis Áron

5

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


2

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


2

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.


0

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.


0

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.