Как расположить элементы в элементе div таким образом, чтобы они двигались туда, куда перемещается элемент div

Question

Я пытаюсь создать простое всплывающее окно на основе div, которое можно использовать для отображения сообщений и прочего.Я использую функцию позиционирования jqueryui, чтобы расположить div в соответствующем месте на странице.

Проблема в том, что, хотя div расположен правильно, элементы внутри него - нет.То есть div находится в центре экрана, тогда как элементы select внутри div находятся внизу страницы.

Каков наилучший способ заставить div вести себя как блок, такой, что элементывнутри него также двигаться, куда движется div?

- Правка - Добавление примера разметки ниже -

    <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;}

Это разметка из фактического HTML-источника, взятого через Firebug.Атрибут стиля для .divpopupsmall добавляется функцией jqueryui.position.

Answer 1

Поменяйте местами позицию css для div.

.divpopupsmall должна быть position: absolute;.popupboxelement должен иметь положение: относительное;

.divpopupsmall{ position: absolute; ... }
.popupboxelement{ position:relative; ... }

ИЛИ

Удалить позицию css из .popupboxelement полностью и оставить .divpopupsmall как положение: относительное;

.divpopupsmall{ position: relative; ... }
.popupboxelement{ ... }

Дополнительная информация:

Абсолютно позиционированные элементы позиционируются относительно окна браузера, если только у родительского элемента не установлено свойство position, равное чему-либо, кроме значения по умолчанию "static" - (Alex)

Относительно позиционированные элементы позиционируются относительно своих родительских элементов.

Answer 2

CSS:

#floating { position:relative; height: 100px; width: 100px; background:#ccc; padding:5px; left: 50px; top: 50px }
.info { position:absolute }

HTML:

<div id="floating">
  <div class="info"> Here is your info</div>
</div>

ПРИМЕЧАНИЕ:

Вы можете изменить position КОНТЕЙНЕРНОЙ КОРОБКИ И ВНУТРЕННЕГО ЭЛЕМЕНТА.

Answer 3

Проблема заключалась в том, что существует промежуточный div, который являлся контейнером для .popupboxelement, и позиционирование для этого промежуточного div не было задано (т. Е. Это было значение по умолчанию, которое является «статическим») (см. Разметку, о которой идет речь)

Я изменил положение промежуточного элемента div, и он работает как положено.

Answer 4

Если вы уже используете jQuery UI, почему бы не использовать их собственный Dialog ?