Question

我正在尝试构建一个简单的基于div的弹出窗口，可用于显示消息和其他内容。我正在使用jqueryui position函数将div放在页面中的适当位置。

问题在于，当div正确定位时，其中的元素不是。这就是div位于屏幕的中心，而div中的select元素位于页面的底部。

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

这是通过Firebug获取的实际HTML源代码的标记。 .divpopupsmall的style属性由jqueryui.position函数添加。

Answer 1

交换div的css位置。

.divpopupsmall应该是position：absolute; .popupboxelement应该是position：relative;

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

或

完全从.popupboxelement中删除位置css，并将.divpopupsmall保留为position：relative;

.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>

注意： 的

你可以追逐THE CONTAINER BOX＆amp;的position。它的内部元素。

Answer 3

如果您已经在使用jQuery UI，为什么不使用自己的Dialog？

Answer 4

问题是有一个中间div是.popupboxelement的容器，并且未设置此中间div的定位（即它是默认值'static'）（参见问题标记）< / p>

我更改了中间div的位置，它按预期工作。

如何在div中定位元素，使它们移动到div移动的位置

4 个答案: