Jquery/CSS：无论浏览器滚动位置如何，强制我/在/的位置？

Question

我尝试使用 css 和 jquery 构建一个简单的评论视图，其中在每行末尾都会弹出一个“回复”链接，下面会弹出一个小框来填写评论。为此，我使用最初隐藏的 div，然后使用 jquery 显示它们，并相对于调用它们的链接定位。

只要浏览器处于整个表单可见的滚动位置，这种方法就可以正常工作。但是，如果没有足够的空间，表单将显示在适合的其他位置。当我在 css 中使用position:relative时，情况也是如此：现在，在回复按钮下方，将为表单提供足够的空白空间，但如果没有，表单仍将显示在顶部而不是按钮下方足够的空间。

这是我的代码：

CSS：

#mycomments_list .comment { margin-left: 50px; }
#mycomments_list .form {
display: none;
position: absolute;
background: #248;
padding: .5em 1em .5em 1em;
border-radius: .5em;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
box-shadow: #000 1px 1px 5px;
-moz-box-shadow: #000 1px 1px 5px;
-webkit-box-shadow: #000 1px 1px 5px;
white-space: nowrap;
}

Jquery：

function setCommentFormVisible(id) {
    var item = $("#comment_form_" + id);
    var connector = $(".comment_click#" + id);
    if (!(item.is(":visible"))) {
        item.show();
        item.css({left:0,top:0});
        item.position({
            my: "left top",
            at: "center bottom",
            of: connector });
        connector.addClass("active");
    } else {
        item.hide();
        connector.removeClass("active");
    }
}

HTML（摘录）

<div class="comment">
    <div id="1">

    mike --- This is the first comment.. -- 
    <a href="#" class="comment_click" id="1_1">Reply</a> 

    <div class="form" id="comment_form_1_1"> 
        .. form here
    </div>

    </div>

...
</div>

我有一种模糊的感觉，这种行为可能是故意的，但是很奇怪的是position：relative会创建所需的空间但然后不填充它？

如果有人指出我在这里可能遗漏或做错了什么，我将不胜感激！

谢谢， qz

Answer 1

jQuery UI 定位实用程序 也有一个碰撞参数。尝试在代码中将其设置为 none：

function setCommentFormVisible(id) {
    var item = $("#comment_form_" + id);
    var connector = $(".comment_click#" + id);
    if (!(item.is(":visible"))) {
        item.show();
        item.css({left:0,top:0});
        item.position({
            my: "left top",
            at: "center bottom",
            of: connector,
            collision: 'none none' });
        connector.addClass("active");
    } else {
        item.hide();
        connector.removeClass("active");
    }
}