div position problem

[roula]

Hi,

I have this code of some divs, and I am trying to put a transparent image in div #transp to cover a certain area of the parent div #main (in order to make an image map of the background image of #main)

i'm trying to position #transp to be in the location i want, but i'm not able to.

doesn't position:relative means the div position is relative to its parent?

here is the code, and you can read some comments inside the last div to clarify more...

<div id="main" style="width:800px;height:800px;margin:0 auto;background: url('/img/bge.jpg') center no-repeat;">
<div id="dhtmlgoodies_scrolldiv" style="position:relative;top:255px;left:257px;">
<div id="scrolldiv_parentContainer">
<div id="scrolldiv_content">
(my contents here)
</div>
</div>
</div>
<div id="transp" style="position:relative;width:257px;height:181px;top:352px;left:0px;background-color:#ff0000;">
<img src="img/spacer.gif" width="257" height="181" />
(in this div there is the transparent image, i'm just coloring it red now to see its position)
(this div is supposed to be in position top 352 and left 0, the left is really 0 relative to the parent that has the background, but the top is more than 352, i dont know why... should i use -minus to position the div where i want?)
</div>

if this is not clear i can post a link to the page.

thank you for your help.

[drhowarddrfine]

doesn't position:relative means the div position is relative to its parent?

Relative to the first "positioned parent". So set the parent of that div to "position:relative" also.

[roula]

Relative to the first "positioned parent". So set the parent of that div to "position:relative" also.

thanks for the tip, i set #main to relative position, and the other divs to absolute position, it's good now