javascript - 查询/CSS : Force my/at/of position regardless of browser scroll position?

Question

我已经尝试使用 css 和 jquery 构建一个简单的评论 View ，在每一行的末尾，一个“回复”链接应该在下面弹出一个小框来填写评论。为此，我使用了最初隐藏的 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;
}

J查询:

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 positioning utility还有一个碰撞参数。尝试在您的代码中将其设置为无:

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