En CSS, quelle est la différence entre le positionnement statique (par défaut) et le positionnement relatif?
Réponses:
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
, right
et bottom
règles:
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'une, div
je 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: 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 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.
static
et 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à absolute
qu'intervient. De même, comme tout élément positionné à l'aide d'une valeur autre que celle que static
vous pouvez utiliser z-index
.
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?
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
, right
et bottom
commandes (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.
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.
position: relative
, et vous ne tapez jamaisposition: static
:)