La différence entre le statique et le positionnement relatif
Dans le CSS, quelle est la différence entre statique (par défaut) de positionnement et de positionnement relatif?
- La différence, c'est que vous avez souvent de type
position: relative
, et vous ne jamais taperposition: static
🙂
Vous devez vous connecter pour publier un commentaire.
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
etbottom
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'undiv
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 ladiv
: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:Remarque comment notre absolument position de l'élément est lié par la relativement placé é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:
Tandis 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.
static
etrelative
élément sont les mêmes, à l'exception de ce dernier, vous pouvez repositionner par rapport à sa position d'origine, de ne pas le contenant élément — làabsolute
vient dans. Aussi, comme tout élément positionné à l'aide d'une valeur autre questatic
vous pouvez utiliserz-index
.position: static;
au lieu de simplement remplacer avecposition: relative;
par défaut ? Si l'on ne veut pas de la position de l'élément autre quetop: 0;
etleft: 0;
alors ne nous laissons pas faire, non ? Y a t il une raison sous-jacente pourquoiposition: static;
est toujours nécessaire dans le cadre de la CSS ?z-index
. Statique ne pas obéir à qui que ce soit.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é.
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
En réponse à "pourquoi CSS serait encore de mettre en œuvre la position: static;" dans un scenerio, à l'aide de position:relative pour un parent et position:absolute pour l'enfant les limites de la mise à l'échelle de la largeur de l'enfant. Dans un menu horizontal, où l'on pourrait avoir des "colonnes" de liens, à l'aide d'une largeur de:auto " ne fonctionne pas avec les proches parents. Dans ce cas, le changer pour "statique" permettra à la largeur de la variable dépendante sur le contenu à l'intérieur.
J'ai passé quelques heures à me demander pourquoi je ne pouvais pas obtenir mon conteneur à ajuster en fonction de la quantité de contenu à l'intérieur. Espérons que cette aide!
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 bougé.
Matthew Abbott a vraiment une bonne réponse.
Absolue et relative des éléments positionnés obéir
top
,left
,right
etbottom
commandes (décalages) où statique éléments positionnés ne le font pas.Position relative des éléments de déplacer les décalages d'où ils seraient normalement dans le code html.
Absolue éléments positionnés déplacer les décalages à partir du document ou de la prochaine position relative de l'élément de l'arborescence DOM.
Statique : STATIQUE placé élément est ce que nous obtenons par DÉFAUT (Normal positionnement des objets).
Relative : par rapport à sa position actuelle, mais peut être déplacé.
Ou UN PARENT positionné élément est positionné par rapport à lui-MÊME.