Search code examples
htmlcssz-indexcss-floatalignment

CSS Help To Position Sale Banner Over Image

I am trying to position this sale banner over the image. The red border is a fixed width div that is as wide as I need for the page layout. No matter what the size of the image is, I need to keep a space as wide as this.

The black border is a div that is only as wide as the picture, which I am trying to display the sale banner in the upper right corner on top of the picture.

EXAMPLE: http://jsfiddle.net/d5nxT/

I know I'm getting something messed up with the displays & positions. I just need the image & sale span to have the same settings, except the sale span floats to the right and has a higher z-index than the image.

Solution

  • See the fiddle and demo:

    fiddle: http://jsfiddle.net/d5nxT/2/

    Demo: http://jsfiddle.net/d5nxT/2/embedded/result/

    float:right, z-index, position:relative, display:inline-block all are not required.