Poistion absolute et relative ???

Bonjour, je n'arrive décidément pas à comprendre la position absolute et relative. Il me semblait que la position absolute permettait de fixer un élément à partir du haut de la page et la position relative à partir du paragraphe (donc à l'intérieur du flux dans lequel un élément est placé). Or, quand je fais position relative dans un paragraphe situé en bas d'un article avec un top 20px et left 200px, l'image se barre en haut de la page...

Donc quelle est la subtilité à saisir ?? j'avoue que j'ai pas mal recherché et je n'arrive toujours pas à comprendre malgré tout les écris. Je me sens un peu ridicule.

Merci d'avance pour ceux qui voudront m'aider

non pas du tout.

-Un élément absolu est positionné par rapport à un point de repère. En l'absence de point de repère, le point de repère sera le coin haut gauche de la page.

-Un élément relatif crée un point de repère ( coin haut gauche de lui-même) valable pour tous ses enfants. Indiquer une position (top,left,...) sur un élément relatif ne fera que le déplacer par rapport à l'endroit où il aurait du être normalement.

Autre effet notoire les éléments absolus (contrairement aux relatifs) perdent automatiquement la place qu'il devait occuper dans la page et ils ne peuvent donc "pousser (par un float)" aucun autre élément. Pratique pour une popup...

Salut,

tout cela n'est effectivement pas évident. C'est d'ailleurs pourquoi il existe plusieurs tutoriels concernant le positionnement sur Alsa dont le point d'entrée est : Guide de survie du positionnement CSS.

Pour ce qui est de ta question et en simplifiant :

le positionnement absolu permet de positionner un élément par rapport à son premier ancêtre positionné (qui possède une position relative, fixed ou absolute) ou s'il n'en existe aucun par rapport à la fenêtre du navigateur.

le positionnement relatif permet d'effectuer un décalage par rapport à la position normale dans le flux.
Modifié par Heyoan (29 May 2009 - 14:39)

Salut Heoyan,

Je vais (re)faire mon ch*eur en te rappelant ce lien :
http://forum.alsacreations.com/topic-4-41122-1.html



Ok, je cherche la petite bête.

Hello Agylus,

Agylus a écrit :
Je vais (re)faire mon ch*eur en te rappelant ce lien

Et tu le fais très bien !

Bien sûr tu as raison mais en l'occurrence je ne suis pas sûr que ça aide beaucoup Nifux de s'occuper de ce genre de précision.


Edit: cela dit je viens de vérifier dans les tutos et cette nuance n'est effectivement pas faite. Je vais en parler aux hautes instances pour voir s'il ne faudrait pas le préciser.
Modifié par Heyoan (29 May 2009 - 14:56)

Je vous remercie, en fait par désespérance j'ai mis absolute au lieu de relative alors que je venais de trouver un article qui m'expliquait enfin clairement ce qu'était les postions.

Pas de soucis Agylus, merci quand même pour le post. Quand on est pas habitué des forums parfois on se retrouve un peu démunis face aux réponses de l'onglet recherche donc c'est parfois avec bonheur qu'on récupère les commentaires des chieurs ^^

Juste un petit extra pour ceux qui voudrait bien me répondre.

Quand on fait une position d'une image, par contre il faut lui faire de la place sinon le texte se superpose c'est ça ?? (j'ai fait un margin à mon paragraphe pour qu'il n'y ait pas de superposition).

Nifux a écrit :
en fait par désespérance j'ai mis absolute au lieu de relative

La plupart du temps il ne faut ni l'un ni l'autre. (cf. le guide).

Nifux a écrit :
Quand on fait une position d'une image, par contre il faut lui faire de la place sinon le texte se superpose c'est ça ??

Quand tu utilises le positionnement absolu tu retires l'élément du flux et donc tu empêches que les éléments se positionnent et se dimensionnent les uns par rapport aux autres.

Voir également le modèle de boîte.