La différence entre le positionnement statique et le positionnement relatif

Question

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

Answer 1

Pour la réponse à "Pourquoi CSS implémente-t-il toujours position:static;", dans certains cas, l'utilisation de position:relative pour l'élément parent et de position:absolute pour l'élément enfant limitera la largeur de mise à l'échelle de l'élément enfant. Dans un système de menu horizontal, vous avez peut-être lié des « colonnes », qui, en utilisant width:auto, ne fonctionneront pas avec les éléments parents relatifs. Dans ce cas, le changer en « statique » permettra à la largeur de changer en fonction du contenu qu'il contient.

J'ai passé des heures à me demander pourquoi le conteneur ne pouvait pas être redimensionné en fonction de son contenu. J'espère que cela t'aides!

Answer 2

Le positionnement statique est le modèle de positionnement par défaut pour les éléments. Ils sont rendus sur la page dans le cadre du flux HTML normal. Les éléments positionnés statiques n'obéissent pas aux règles left、top、right和bottom :

Le positionnement relatif vous permet de spécifier un décalage spécifique par rapport à la position normale d'un élément dans le flux HTML (comme dans left、top等）。因此，如果我在一个div中有一个文本框，我可以在文本框上应用相对定位，以便它显示在相对于它在divUne position spécifique où il serait normalement placé :

Il existe également un positionnement absolu - vous pouvez spécifier la position exacte d'un élément par rapport à l'ensemble du document, ou par rapport à l'élément suivant positionné relativement plus haut dans l'arborescence des éléments :

Quand position: relative est appliqué à un élément parent dans la hiérarchie :

Veuillez noter que nos éléments positionnés de manière absolue sont soumis aux limitations des éléments positionnés de manière relative.

Enfin, il y a le positionnement fixe. Le positionnement fixe contraint un élément à un emplacement spécifique dans la fenêtre qui reste inchangé lors du défilement :

Vous pouvez également observer que les éléments positionnés fixes ne provoquent pas de défilement car ils ne sont pas considérés comme des éléments délimités par la fenêtre :

Alors que les éléments en position absolue sont toujours contraints par la fenêtre d'affichage et provoqueront un défilement :

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

En utilisant le positionnement absolu et le positionnement fixe, les éléments sortiront du flux HTML.