Question

I need a little help positioning a div correctly.

This is my code:

<td width="318" height="450" align="left" style="border:solid 1px #666;">
    <div id="foldLeft" style="position:relative; top:0px; left:0px; z-index:1001;">
        <img src="foldLeft.png">
    </div>
    <div id="leftPage">
        <img src="page2.jpg">
    </div>
</td>

I have a button, onMouseOver it should show the DIV element called foldLeft, which was hidden on page load, in the top-left corner of that TD. This works fine but the DIV should be on top of everything, instead it’s pushing the content down 30 pixels (the size of the DIV).

How can I position this so it sits at the top-left corner of the TD but is on top of everything? I thought z-index would sort that out but hasn’t.

Answer 1

<td width="318" height="450" align="left" style="border:solid 1px #666; position:relative">
<div id="foldLeft" style="position:absolute; top:0px; left:0px; z-index:1001;"><img src="foldLeft.png"></div>
<div id="leftPage"><img src="page2.jpg"></div>
</td>