Comment superposer un canevas sur une image?

Question

Je voudrais placer une toile au-dessus d'une image que j'ai sur une page. La toile sera les dimensions exactes de l'image.

Cependant, les conditions suivantes doivent être remplies:

• La toile doit rester exactement au-dessus de l'image en tout temps. Par conséquent, l'utilisation du positionnement absolu ne fonctionnera pas car si le contenu est inséré au-dessus de l'image, l'image sera déplacée vers le bas sans déplacer le canevas.
• L'image peut être redimensionnée à partir de sa taille d'origine. Par conséquent, le remplacement de l'image par la toile et la définition de son arrière-plan à l'image ne fonctionneront pas.

Quelles options ai-je?

Answer 1

Vous devriez pouvoir utiliser position:relative au lieu de l'absolu pour votre première exigence. Pour la seconde, je suppose que vous pourriez mettre à la fois l'image et la toile à l'intérieur d'une travée. La toile aurait une largeur/hauteur de 100% et serait redimensionnée à mesure que l'image se redimensionnerait car la taille de la div changerait pour s'adapter à l'image.

EDIT: en fait je ne suis pas sûr que position:relative fonctionnerait. Mais je crois que si vous utilisez position:absolute et l'élément parent a position:relative, que les positions absolues seront relatives au parent.