Différence exacte position:relative et margin:

Hello,

Cela fait des heures que je tourne en rond pour une histoire de marge qui me décalait tout. Pour le fun, jme suis dit : "tiens, tu vas te la tenter à la position:relative;, au point où t'en es, t'as rien à perdre !"

Et là, une bénédiction venu du ciel, cela correspond à ce que je voulais mais je ne comprends plus rien. J'étais persuadé (et je le suis quand meme encore un peu) que position:relative associé à son top, bottom, left et right revenait à la meme chose qu'un margin-top/-bottom/-left/-right...

Si quelqu'un peut m'expliquer la différence exacte et comme savoir lequel utiliser à chaque fois, je prends avec plaisir (et j'imagine que cela ne servira pas qu'à moi).

Merci bien

Bonjour Clausan,

Les marges permettent de décaller un élément en réservant une zone « vide » entre l'élément et les éléments alentours.
La position relative permet de décaller un élément par rapport à son positionnement normal, dit positionnement « en flux ». L'élément s'affiche décallé, mais pour les autres éléments de la page c'est son positionnement normal qui est pris en compte.

Il y a un article sur la question sur Openweb :
Initiation au positionnement CSS : flux et position relative

Sinon, une petite image vaut mieux qu'un long discours (en fait c'est faux, ça serait plutôt complémentaire) :

Modifié par mpop (30 Jun 2006 - 23:03)

Bonsoir,
C'est une question pertinente. Pour commencer quand on positionne un
élément on est dans une logique de positionnement alors que ce n'est pas
toujours les cas des marges qui permettent comme leur nom l'indique
de donner des marges à un élément sans viser son positionnement.
Techniquement il y a une différence:
lorsqu'un élément est positionné en relatif, il est décalé de son
emplacement initial mais l'espace qu'il aurait occupé s'il n'avait pas
été positionné ne disparaît pas.
Modifié par Hermann (30 Jun 2006 - 23:21)

Hi,

Merci à vous deux pour vos réponses, elles m'aident beaucoup dans mon apprentissage.
Une dernière question absurde qui mérite une réponse bien évidement absurde : on ne peut pas combiner un position:relative; avec des margin ? Cela m'étonnerait fortement vu que les 2 comportements sont totalement différents vu à cet espace laissé par le positionnement.

Merci encore pour ces infos enrichissantes

Clausan a écrit :
Une dernière question absurde qui mérite une réponse bien évidement absurde : on ne peut pas combiner un position:relative; avec des margin ? Cela m'étonnerait fortement vu que les 2 comportements sont totalement différents vu à cet espace laissé par le positionnement.

On peut tout à fait combiner les marges avec le positionnement relatif.

Plus fort encore, on peut combiner les marges et le comportement flottant, ou bien le comportement flottant et le positionnement relatif, ou bien encore le comportement flottant et les marges et le positionnement relatif.

Je ne vois pas trop quelle serait l'incompatibilité fondamentale. D'ailleurs, les marges ne sont pas un comportement mais plutôt une propriété de la boîte dessinée par l'élément : en quelque sorte, les marges sont un espace réservé, visuellement vide, qui appartient à la boîte en question. Par contre, je ne me souviens plus si quand on décale un élément via le positionnement relatif, on décale uniquement la partie visible, ou si on déplace aussi les marges (soit l'ensemble de la boîte)… et si oui, je ne sais plus si ces marges sont actives ou pas.

Cf le modèle CSS de boîte pour mieux s'y retrouver.
Petit lien qui va bien : Une illustration (en anglais) du modèle de boîte (box-model) CSS.