OverView map floats over corner of page not corner of map

Question

I am following http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jssamples/map_overviewmap.html

And the overview map functions properly but it appears in the top right hand corner of the entire web page, not the map. This happens in IE, Chrome and FireFox.  Has anyone come across this before?

One thing is I am not using the dojotype dijit.layout.* tags, I have my own div I am styling directly. But it must be possible to get this sample working without such tags?

Thanks,
James

JamesB · Answer

Setting position:relative worked for me, thank you

HeribertoMantilla_Santamaría · Answer

In this case if you use a Div with dojoType dijit.layout.BorderContainer and inside a map's Div Relative Position doesn't work.

khutchins · Answer

You can resolve this issue by adding "position:relative" to the map div's style. This is necessary because the overview map is absolutely positioned and its containing block will be the closest positioned ancestor element. Setting the position of the map's div to relative will make it the overview map's container. Details on this behavior can be found in this article: http://www.brainjar.com/css/positioning/default4.asp Here's a sample that shows how this works. Overview Map

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."