I am trying to build a simple div based popup which can be used to display messages and other stuff. I am using jqueryui position function to position the div in the appropriate place in the page.

The issue is that the while the div is positioned correctly, the elements inside it are not. That is the div is at the center of the screen, whereas the select elements within the div are at the bottom of the page.

What is the best way to make the div behave like a box such that the elements inside it also move where the div moves?

Should work tho. For some information: absolutely/fixed positioned elements are positioned in reference to the browser window, unless the parent element has a position property set to anything but the default "static"
–
AlexJul 5 '11 at 10:03

As Alex mentioned, it should've worked. The issue was there because there was an intermediate div (as you can see in the markup above) and its positioning wasnt set.
–
sassyboyJul 5 '11 at 11:43

The jquery dialog has the close button and I dont want the user to be able to close the dialog unless some action is performed. I am not sure if you can get rid of the close button on the jqueryui dialog. Can you?
–
sassyboyJul 5 '11 at 11:51

The issue was that there is an intermediate div which was the container to the .popupboxelement and the positioning for this intermediate div was not set (i.e. it was the default value which is 'static') (see markup in question)

I changed the positioning of the intermediate div and it works as expected.