Fixed, Absolute et Relative

[einqui]

Bonjour,

J'ai decouvert il y a peu les joies du CSS et je me pose une question. J'ai beau consulter plusieurs sites, je ne comprends pas encore tres bien certaines fonctions pourtant essentielles pour le positionnement d'elements :

- Fixed : la, facile : l'element ne bouge pas du tout et sa position est definie une fois pour toute
- Relative : si j'ai bien compris, l'element est place en fonction de la position de l'element parent
- Absolute : la j'ai rien compris.... La position est absolute mais pas Fixed?

Et puis de nombreux sites disent que dans certains cas, l'element est retire du flux. Qu'est-ce que cela veut dire?

Merci d'avance pour votre aide.

 

[molgow]

Si je ne me trompe pas...

fixed : c'est fixé par rapport à la fenêtre, donc ça ne bougera vraiment pas. (utilité pour un menu vraiment fixe par exemple)
absolute: c'est fixé par rapport au document lui même, ça défilera si l'on scrolle la page
relative: je crois que tu as dit juste.

 

[einqui]

OK, mais dans ce cas, quand je specifie des coordonnees pour le mode Absolute, elles se referent a quoi? Au body?

 

[minime]

<div style="position: relative; background-color: #CCCCCC; border: 1px dashed #000000; width: 200px; padding: 0px">

<p style="padding-top: 90px; padding-left: 5px">Mon avatar est dans une boîte en position absolue, ses coordonnées (top et left à 0) sont calculées par rapport aux bords du div parent, qui est en position relative. J'ai rajouté du padding sur ce texte, sinon il passerait sous l'image.</p></div>

 

[einqui]

Bon, faisons dans la pedagogie ;D
Ton avatar est en position absolue (0,0) et il se trouve dans le coin superieur gauche de la boite parent. Quelle serait la difference si ton avatar avait les memes coordonnees mais en position relative? Je crois que c'est surtout ca, la difference absolute/relative qui me laisse perplexe....

 

[Nephou]

En fait, quand un élément est absolument positionné, il “sort” du flux d’éléments frères. C’est à dire que sa position ne tient pas compte de celles des autres éléments contenus dans le même que lui. Cela se traduit notemment par le fait qu’il passe au premier plan au z-index.

démonstration :

<font class="small">Code:</font><hr /><pre>
&lt;style&gt;
p {margin:0;}
div {margin:5px auto;width:200;padding:3px;border:1px dashed indianred;}
img{left:10px;top:10px}
&lt;/style&gt;

&lt;div&gt;
&lt;p&gt;Petit texte destiné à illustrer mon propos et suffisemment long pour devoir prendre plusieurs lignes&lt;/p&gt;
&lt;img src="http://forums.macg.cohttp://forums.macg.co/vbulletin/images/smiliesold/frown.gif" /&gt;
&lt;/div&gt;</pre><hr />
donne :

<font class="small">Code:</font><hr /><pre>
&lt;style&gt;
p {margin:0;}
div {margin:5px auto;width:200;padding:3px;border:1px dashed indianred;}
img{position:relative;left:10px;top:10px}
&lt;/style&gt;

&lt;div&gt;
&lt;p&gt;Petit texte destiné à illustrer mon propos et suffisemment long pour devoir prendre plusieurs lignes&lt;/p&gt;
&lt;img src="http://forums.macg.cohttp://forums.macg.co/vbulletin/images/smiliesold/frown.gif" /&gt;
&lt;/div&gt;
</pre><hr />

donne :

<font class="small">Code:</font><hr /><pre>
&lt;style&gt;
p {margin:0;}
div {position:relative;margin:5px auto;width:200;padding:3px;border:1px dashed indianred;}
img{position:absolute ;left:10px;top:10px}
&lt;/style&gt;

&lt;div&gt;
&lt;p&gt;Petit texte destiné à illustrer mon propos et suffisemment long pour devoir prendre plusieurs lignes&lt;/p&gt;
&lt;img src="http://forums.macg.cohttp://forums.macg.co/vbulletin/images/smiliesold/frown.gif" /&gt;
&lt;/div&gt;</pre><hr />
donne :

 

[einqui]

Ah, donc si je te suis :

positionne en absolu, un element est positionne par rapport a l'origine de son element parent

positionne en relative, un element est positionne par rapport a l'element precedent contenu dans l'element parent. (dans ton cas : l'element precedent en question est le texte). Je suppose donc que si on reduit la longueur du texte, l'icone se deplace en fonction. Alors qu'en absolu, il reste a sa position quelle que soit la longueur du texte.

J'ai tout bon?

 

[Nephou]

Oui

P.S. : note que pour un bon positionnement, l’élémement parent doit-être en position:relative

P.S. 2 : désolé pour la faute d’orthographe dans les captures d’écran (il fau lire suffisamment et pas suffisemment

)

 

[einqui]

Oui

P.S. : note que pour un bon positionnement, l’élémement parent doit-être en position:relative

P.S. 2 : désolé pour la faute d’orthographe dans les captures d’écran (il fau lire suffisamment et pas suffisemment

)

Voila ce que c'est que d'avoir de bons profs

Quant a ton PS, cela veut dire que j'aurai beau mettre nombre d'elements en relative, si l'element parent ne l'est pas lui meme (relative), cela ne fonctionnera pas...

 

[Nephou]

Voila ce que c'est que d'avoir de bons profs

Quant a ton PS, cela veut dire que j'aurai beau mettre nombre d'elements en relative, si l'element parent ne l'est pas lui meme (relative), cela ne fonctionnera pas...

Oups, j’ai été trop vite dans le P.S. 1 : c’est pour l’élément en positionnement absolu que le parent doit être en relatif ; sinon le positionnement se fait par rapport au premier parent en positionnement relatif rencontré (par défaut : body, enfin je crois. Mais expérimente un peu

et tout sera plus clair

 

[SIBELIUS]

Si je peux me permettre, tu trouveras peut-être des explications complémentaires ici : http://www.alsacreations.com/articles/div/

 

[einqui]

Si je peux me permettre, tu trouveras peut-être des explications complémentaires ici : http://www.alsacreations.com/articles/div/

Pas de probleme, tout conseil est le bienvenu. Mais j'avais deja visite ton site. D'ailleurs, si je peux a mon tour me permettre, cette phrase m'avait laisse perplexe :

Lorsqu'il est en position absolue ou relative, le bloc est dit "positionné". Il est retiré du "flux" du code html : son positionnement sera le même quelle que soit l'emplacement de la balise dans le conteneur. Le bloc est placé par rapport à son conteneur s'il est lui-même positionné, ou alors par rapport à la page entière (body).

parce que je ne voyais pas ce que tu entendais par "le conteneur doit etre lui meme positionne"

Mais je crois que j'ai compris maintenant

 

[SIBELIUS]

parce que je ne voyais pas ce que tu entendais par "le conteneur doit etre lui meme positionne"

Le conteneur doit lui-même être en position: relative ou position : absolute... sinon il se réfère au &lt;body&gt;

 

[einqui]

Le conteneur doit lui-même être en position: relative ou position : absolute... sinon il se réfère au &lt;body&gt;

OK, merci