jQuery 弹出窗口未显示在所需位置答案

【问题标题】：The jQuery popup does not show at the desired positionjQuery 弹出窗口未显示在所需位置
【发布时间】：2013-01-22 13:15:07
【问题描述】：

我有一个文本框和一个隐藏的 div，它们将显示为弹出窗口。我希望当用户单击文本框时，隐藏的 div 弹出窗口将显示在文本框的位置。所以，我使用代码：

var p = $("#listCats");
var position = p.offset();
$('#category').css({"left" : position.left, "top" : position.top});

listCats：文本框的id

category：隐藏div的id，也是css

#category {
        width: 508px;
        min-height: 135px;
        padding: 0.4em;
        position: absolute;
        border: 2px solid rgb(124, 113, 113);
        background: #fff
}

但是，隐藏的 div 弹出窗口并没有像我预期的那样显示，而是：

我是不是做错了什么？

编辑：完整的隐藏div如下：

<div id="category" style="display:none;">
        <s:iterator value="categoryMapList">
            <div class="cat_label_title parentCat" id="<s:property value="key.id" />">
                <s:property value="key.name" />
                <div class="subCat">
                    <s:iterator value="value" var="category">
                        <label >
                            <a  href="#" class="cat_label_item catItem" name="catItem:<s:property value="key.name" />, <s:property value="#category.name" />"
                                id="catItem:<s:property value="#category.id" />">
                                <s:property value="#category.name" />
                            </a>
                        </label>
                    </s:iterator>
                </div>
            </div>
        </s:iterator>
    </div>

【问题讨论】：

你能发布文本和 div 的 HTML 吗？
我已经用完整的隐藏 div 更新了问题，其他的只是 html 打开/关闭标签

标签： jquery popup

【解决方案1】：

您可能需要检查类别容器是否绝对定位在另一个具有相对定位的 div 内。

这意味着顶部，左侧是相对于父级的。

因此，通过获取父级的页面偏移量，然后将其设置为子级，您会将其推离父级而不是下方。

也检查一下：https://stackoverflow.com/a/3202038/1060487

【讨论】：

【解决方案2】：

jquery.css 需要一个以 px 结尾的字符串。在你的情况下：

$('#category').css({"left" : position.left + 'px', "top" : position.top + 'px'});

【讨论】：

【解决方案3】：

HTML：

<input type="text" name="txt" id="listCats">

<div id="category"><p>Hello</p></div>

CSS：

#category {
  width: 508px;
  min-height: 135px;
  padding: 0.4em;
  position: absolute;
  border: 2px solid rgb(124, 113, 113);
  background: #fff;
  display: none;
}

jQuery:

var $inp = $("#listCats"),
$msg = $("#category"),
pos = $inp.offset();

$inp.bind("click", function () {
  $msg.css({
    "left": pos.left,
    "top": pos.top + $inp.height()
  }).show();
});

工作小提琴：http://jsfiddle.net/darshanags/MEgrp/12/

【讨论】：