Objets superposés sans position:absolute

Saloute !
Je cherche à superposer une image par dessus un texte.
Mais si je la met en position: absolute, elle se retrouve à différents endroits selon les résolutions d'écran de chacun, et si je la met en position: relative, elle n'est plus superposée et décale mon texte. Est-ce qu'il y a une propriété qui permet de mettre un objet par dessus un autre mais qui soit positionné de façon relative par rapport à un bloc parent ?

Merci!
Modifié par Angy (16 Jun 2009 - 15:45)

Peut-être ceci :
http://www.alsacreations.com/astuce/lire/84-comment-fonctionne-la-proprit-css-z-index.html

Hello,

Angy a écrit :
Mais si je la met en position: absolute, elle se retrouve à différents endroits selon les résolutions d'écran de chacun

Non, elle se place par rapport au dernier conteneur parent positionné, et par rapport à la fenêtre du navigateur s'il n'y en a aucun.

Angy a écrit :
Est-ce qu'il y a une propriété qui permet de mettre un objet par dessus un autre mais qui soit positionné de façon relative par rapport à un bloc parent ?

C'est pas très clair, mais je pense que le positionnement absolu convient justement dans ton cas, mais avec un conteneur référent bien défini.

Pour t'aider efficacement il nous faudrait une petite maquette de ce que tu souhaites obtenir.
Modifié par BeliG (16 Jun 2009 - 16:54)

BeliG a écrit :
Non, elle se place par rapport au dernier conteneur parent positionné, et par rapport à la fenêtre du navigateur s'il n'y en a aucun.

Bah c'est ce que je croyais, mais que je la mette dans n'importe quel conteneur, elle se positionne toujours par rapport à la page.

http://img189.imageshack.us/img189/7373/sanstitredpz.png

Je voudrais que l'image reste toujours comme elle l'est sur le cas de gauche !
Modifié par Angy (16 Jun 2009 - 17:22)

Rien d'anormal, tu positionnes ton image en partant du bas (bottom:50px), donc forcément si la hauteur de ton conteneur varie le positionnement de l'image aussi...

Que veux tu faire exactement ? Si c'est simplement mettre une image par dessus du texte et toujours au même endroit, utilise "top" au lieu de "bottom".

Si tu veux faire autre chose, fais moi un dessin !


EDIT :

a écrit :
Je voudrais que l'image reste toujours comme elle l'est sur le cas de gauche !

Gogo "top" au lieu de "bottom" !

Au passage, il n'y a pas d'unité pour les valeurs de la propriété z-index (on spécifie une "position d'empilement"). Écrire z-index:5px est une erreur.
Modifié par BeliG (16 Jun 2009 - 17:37)

D'accord pour le top ! En fait, si j'avais mis bottom, c'est que j'avais lu dans un article que pour positioner des éléments, il valait mieux faire au plus simple et éviter de faire de trop grands décalages. Comme mon image doit être plutôt en bas du cadre, j'étais parti de bottom.
Sinon pour le z-index, réflexe désolé ! Il n'y est pas dans mon code original ^^

Ca marche ! Plus de décalage vertical ! Mais je viens de tester en passant en résolution inférieure, j'ai toujours un décalage de l'image horizontalement.
Modifié par Angy (21 Jun 2009 - 22:59)

Angy a écrit :
Edit : au diable la confidentialité, voilà mon site

Antoine ! C'est bien toi ?

Angy a écrit :
comme ça tu pourras me dire ce qui va et ce qui ne va pas.

Y a pas mal de choses sur lesquelles on pourrait discuter, mais faute de temps on va rester sur ton problème de positionnement d'image.


1°) Pour commencer, je t'invite à relire mon premier message avec plus d'attention :

a écrit :
[quote=Angy]Mais si je la met en position: absolute, elle se retrouve à différents endroits selon les résolutions d'écran de chacun

Non, elle se place par rapport au dernier conteneur parent positionné, et par rapport à la fenêtre du navigateur s'il n'y en a aucun.

[...]

C'est pas très clair, mais je pense que le positionnement absolu convient justement dans ton cas, mais avec un conteneur référent bien défini.
2°) Je poursuis avec une petite citation :

"Un élément positionné est un élément dont la propriété CSS "position" a pour valeur "relative", "absolute" ou "fixed". Par défaut, les éléments d'une page ne sont pas positionnés (ils sont en "position:static")."
(Cf. Comment fonctionne la propriété CSS z-index ?)


3°) Je t'achève avec un triple vent qui pue collé facial.

Hum... nan sérieusement, je t'annonce que tu n'as aucun conteneur parent positionné, donc ton image se positionne par rapport à la fenêtre du navigateur. Solution : appliquer un position:relative sur ta <div> "support_bottom" pour qu'elle serve de référence, et adapter les valeurs "top" et "left" de ton <img> "feuille" pour qu'elle se mette là où j'pense !

A plus.

Juste un petit position:relative en plus et tout va mieux
Merci, je pensais avoir tout essayé... mais je me complique trop la vie faut croire.
Si tu as d'autres remarques d'un autre ordre, je suis preneur.