Overlapping image in photoshop splice, how to float with CSS

Tags: html,css,xhtml,css-float

Problem :

Here is the site I am working on:


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!

Solution :

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.

    CSS Howto..

    Rails - how to get absolute url of an asset in css.erb

    How to disable CSS Class on particular DIV

    CSS image rollover map and jQuery : how to use a second li list?

    css nested classes, how to not repeat code?

    How to add css properties inside the PHP tag

    Fancyselect: How to force to open the selector at the bottom?

    How to do this with vertically stacked tabs, instead of horizontal?

    How do I get a zooming effect on an image when a user hovers over it? [closed]

    How can I extend the width of a child div to go beyond the parent div's width?

    Any ideas how to display divs vertically in bootstrap container?

    How can I add a whitespace in between my element and psuedo element?

    How to remove margin space around body or clear default css styles

    How to Fix: iOS drops CSS files when javascript changes DOM

    How can I make uneven rows for a 2-column grid with Bootstrap/css?

    jquery - how to change the display css attribute of a button within a li on hover

    How to include .otf in css?

    CSS : How to add an absolute div to a scrollable background? [closed]

    How to use CSS position(relative, absolute) with percentage (height, width) dimension? [closed]

    CSS How to have a text caption in the bottom of an image?

    Css. How to move div with fixed position up if it overlays footer

    How do I center a div between two other divs?

    HTML/CSS: how to force text within a tag to be styled with font-style: italic !important;

    how to change “product details” text to my own text in Virtuemart?

    How to figure out if CSS transition is about to happen?

    How to set height?

    How to keep Fixed position navigation static positioned when resizing window

    how to display background color in outlook 2010 html email?

    how to overwrite css style in asp.net page?

    CSS - How to add a second gradient to make this button half transparent?

    How to overlap elements inside of a ng-repeat list - position: absolute?