Setting\Placing a DIV(CSS Layer) with table cell as reference

Question

you may skip the following HTML code to proceed to actual question

<!-- Some HTML Code-->
<table width="100%" height="100%" border="1">
<tr>
    <td rowspan="03" width="20%">&nbsp;</td>
    <td width="60%">&nbsp;</td>
    <td rowspan="03" width="20%">&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
</tr>
</table>

the output of the above code will be somewhat like this

now i want i CSS Layer (a DIV) setup with the center-cell (red bordered cell) as its REFERENCE how to do it...

 #myLayer{
 position: ? ;
 left    : ? ;
 right   : ? ;
 top     : ? ;
 bottom  : ? ;
 padding : ? ;
 width   : * ;
 height  : * ;
 z-index : 2 ;
 }

and where to place the <div id="*"></div> tag

Answer 1

Not exactly sure if this is what you're trying to do, but you could give the red-bordered td an id and place the div inside of it. Then use the following CSS:

#mainTD {
    position: relative;
}

#myLayer {
    position: absolute;
    top: 0;
    left: 0;
}

I never use tables for layout so I don't know if this will react how I think it will, but this should make #myLayer's top, left, bottom, and right coordinates relative to the coordinates of its parent, #mainTD. So in the instance above, with top and left set to 0, #myLayer's top-left corner should be at #mainTD's top-left corner.