Positioning Blocks Relative To An Image

I have the following situation: I have a container of a fixed size. Inside the container I display an image (of unknown size) that is bigger than the container. I want to display

Solution 1:

position: relative does not work on table cells.

From the spec: http://www.w3.org/TR/CSS21/visuren.html#propdef-position

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

So, add a wrapper div and apply position: relative to that instead:

http://jsfiddle.net/B9Le8/5/

<div id="container">
    <div> <!-- the wrapper -->
        <img id="img" src="http://lh5.ggpht.com/-J7Q7cUDEFOU/S_bKEoyMSzI/AAAAAAAAGIw/PZJduitsVa0/largeNewGoogleLogoFinalFlat-a.png" />
        <div class="overlay" id="top">Overlay top</div>
        <div class="overlay" id="bottom">Overlay bottom</div>
    </div>
</div>

#container > div {
    position: relative;
}

Solution 2:

I think you should put the image in a <DIV> and set a style="background:url()" in it. Then in that DIV , put the DIVs that you want to position. It should be easier like that.