Question

Here is the site I am working on:

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

My problem is the red box in the top right corner. I spliced up the site is photoshop but since that part overlaps I needed to split the image in 2. How would I go about placing just the red box floating over everything else? z-depth maybe?

I would of course save it as a png to save transparency, but I wouldn’t even know where to start to make it float over the existing 2 images

Please help!

Answer 1

On the <td> that contains your image (let’s call it <td class="imageholder">):

td.imageholder { position: relative; }

From there, cenk’s solution will work, regardless of the browser window.

Explanation:
Absolutely positioned elements look at their container element, which defaults to the entire document. If an absolutely positioned element is inside another element with position: absolute or relative, it will use that as the starting point for positioning.