Question

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?

— Edit – Adding sample markup below —

    <div class="divpopupsmall" id="ctl00_cp1_JobCategoryCitySelect" style="position:          relative; top: 93.2px; left: 278.5px;">



        <div>
            <select class="popupboxelement" id="ctl00_cp1_ddlJobCategory" name="ctl00$cp1$ddlJobCategory">
    <option value="0">Driver</option>
    <option value="1">Maid</option>
    <option value="2">Cook</option>
    <option value="3">Nanny</option>
    <option value="4">Gardener</option>
    <option value="5">Guard</option>
    <option value="6">Laborer</option>
    <option value="7">Garment Worker</option>
    <option value="8">Office Helper</option>
    <option value="9">Delivery Helper</option>
    <option value="10">Receptionist</option>
    <option value="11">Other</option>
    <option value="12">Maid cum Cook</option>
    <option value="13">Data Entry</option>
    <option value="14">Cashier</option>
    <option value="15">Nurse-maid</option>
    <option value="16">IT Pro</option>
    <option value="17">Machinist</option>
    <option value="18">Sales Rep</option>
    <option value="19">BPO Call Center</option>
    <option value="20">Management</option>
    <option value="21">Teacher</option>
    <option value="22">Finance</option>
    <option value="23">Engineer</option>
</select>
        </div>

    </div>

CSS :

.divpopupsmall{border: 7px solid  rgba(150,150,150,0.2); width:400px; height:200px;z-index:700;background-color:#fff;-moz-box-shadow:0px 0px 10px #aaaaaa;-webkit-box-shadow:0px 0px 10px #aaaaaa;
 box-shadow:0px 0px 10px #aaaaaa;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
 .popupboxelement{position:absolute;}

This is the markup from the actual HTML source taken via Firebug. The style attribute for the .divpopupsmall is added by the jqueryui.position function.

Answer 1

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.