Superposition d'image dans Photoshop découper, comment flotter avec CSS

Question

Voici le site sur lequel je travaille:

http://graves-incorporated.com/test_sites/solera2012/test/home-pg.html

Mon problème est la boîte rouge dans le coin supérieur droit. J'ai découpé le site dans Photoshop mais comme cette partie se chevauche, j'ai dû diviser l'image en 2. Comment pourrais-je placer juste la boîte rouge en flottant au-dessus de tout le reste ? Profondeur z peut-être?

Je le sauvegarderais bien sûr en png pour conserver la transparence, mais je ne saurais même pas par où commencer pour le faire flotter par-dessus les 2 images existantes.

S'il vous plaît, aidez-moi!

Answer 1

Voici un début :

HTML

CSS

img#rightAligned {
   position: absolute;
   top: 50px; // ajuster
   right: 20px; // ajuster
}

Answer 2

Sur le qui contient votre image (appelons-le ):

td.imageholder { position: relative; }

À partir de là, la solution de cenk fonctionnera, peu importe la fenêtre du navigateur.

Explication: Les éléments positionnés de manière absolue se réfèrent à leur élément conteneur, qui par défaut est l'ensemble du document. Si un élément positionné de manière absolue se trouve à l'intérieur d'un autre élément avec position: absolute ou relative, il utilisera cela comme point de départ pour le positionnement.