[Résolu] Position relative ou margin ?

Question

eviouchka

26 Jul 2013 à 11:08

Bonjour a tous,

je ne viens pas demander de l'aide pour un problème spécifique mais plutôt un "éclairage" :
pour positionner un élément dans une page / une div , quelle est la solution la plus propre ? la plus efficace ? -> mettre l'élément en position :relative; ou le déplacer avec des margin ?
si j'ai une div en float:left; et une en float:right; et je veux les rapprocher l'une de l'autre: je choisis le margin ou la position: relative ?
j'ai lu pas mal de tutos , forums, liens... mais je n'ai pas trouvé de page qui m'explique la différence entre les 2 et quel choix appliquer selon les cas ?

merci d'avance de prendre du temps

adrien881

26 Jul 2013 à 11:51

a écrit :
j'ai une div en float:left; et une en float:right; et je veux les rapprocher l'une de l'autre

Tu veux rapprocher des div que tu as volontairement séparées, c’est bien ça ta question ?

eviouchka

26 Jul 2013 à 12:06

nan c pas exactement ça ! c'est pas un problème précis que j'évoque mais plutôt une question "sémantique" sur ces deux propriétés que sont les position ou les margin et qui peuvent avoir le même effet "visuel" . Mais je me demande toujours quelle est la meilleure propriété à appliquer pour déplacer un élément ?

mob

26 Jul 2013 à 23:55

La position relative est intéressante surtout dans les cas du positionnement d'un élément enfant en position absolute ou l'utilisation d'un z-index.

Quand il s'agit de la gestion des marges entre les éléments, margin remplit son rôle Smiley smile

~~supprimé~~

27 Jul 2013 à 10:12

Bonjour eviouchka, Smiley smile

Tu sais que ta question n'a pas de réponse en soit ! pour commencer à cause du DOCTYPE , de l'emploie ou non de HTML5 etc ...
Prenons un exemple en DOCTYPE stricte,


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
<head>
<style>
div.centre2 {width: 800px;margin : auto;text-align:center;} 
</style>
</head>
<body>
<br />blabla<br />
<br />xxxxxxxxx<br />
<div class='centre2'>
<span class="leTitre">Nous joindre</span><br /><br />
</div>
<br />zzzzzzzzzzzzzz
</body></html>

Dans ce cas le contenu de centre2 sera centré dynamiquement dans ta page
et ce aprés les deux premiers textes, et avant zzzzzzzzzzzz
La position relative ne permettrais pas d'obtenir ce résultat.
Tu vois, pas de recette miracle, mais une exacte connaissance de chaque style
en fonction de son environnement !
Bon courage pour la suite.
Modifié par Christele (27 Jul 2013 - 10:13)

thierry

27 Jul 2013 à 19:24

Zelalsan

28 Jul 2013 à 04:31

a écrit :
La position relative ne permettrais pas d'obtenir ce résultat.

Elle le permet très aisément


div {position:relative;width:200px;height:100px;left:50%;margin-left:-100px;background-color:#000;}

La méthode la plus propre selon moi reste tout de même les marges. Lorsque tu utilises une position relative, l'élément que tu positionnera avec "top/left..." occupera toujours un espace dans le flux et les éléments qui l'entourent ne seront pas réorganiser ou décalés.


<div></div>
<p>Pop</p>

Exemple 1


div, p {display:inline-block;vertical-align:top;margin:0;}
div {position:relative;width:200px;height:100px;left:400px;background-color:#000;}

Exemple 2


div, p {display:inline-block;vertical-align:top;margin:0;}
div {position:relative;width:200px;height:100px;margin-left:400px;background-color:#000;}

Dans le premier cas, le <p> sera décalé en fonction de la marge gauche de la <div> tant dis que dans le second, le <p> restera à sa place malgré le décalage de la <div>.
Les marges offrent une mise en page plus fluide mais comme déjà dit, cela dépend de ce que tu veux faire.
En gros, une position relative gardera l'élément positionné dans le flux (l'espace qu'il occupera ne sera pas pris par un autre élément) et le positionnera sans perturber les autres qui l'entourent alors que les marges impactent les éléments adjacents.
Modifié par Zelalsan (28 Jul 2013 - 04:32)

eviouchka

28 Jul 2013 à 09:20

Merci @thierry pour les liens et merci à tous pour vos éclairages : pas simple en effet mais très intéressant toutes ces subtilités
merci aussi à toute l'équipe d'Alsacréations qui fournit une mine d'or de conseils, d'explications simples et claires sur tous les sujets .

bonne continuation à tous
Modifié par eviouchka (28 Jul 2013 - 09:20)

Sujet clos

Questions générales et questions de débutants

[Résolu] Position relative ou margin ?