javascript：将绝对div对齐在另一个div之上

Question

我想做一个类似的组合，我需要在输入上方对齐一个div。

如何计算列表的正确bottom css property以显示在输入正上方？

示例代码：

HTML

<div style="position:absolute;top:150px; left:150px;">
    <input/><span class="btn">V</span>
</div>
<div class="list" style="display:none;">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

CSS

.btn {
    width: 10px;
    height:10px;
    background-color: black;
    cursor: pointer;
}

.list {
    position: absolute;
    border: solid 1px black;
}

JS

$('.btn').click(function(){
    var list = $('.list');
    list.show();

    var inputOffset = $('input').offset();

    list.css({
        bottom: inputOffset.top,
        left: inputOffset.left
    });
});

FIDDLE

注意： 输入将像过滤器一样工作，因此列表的高度将发生变化。 我想让浏览器保持列表对齐。这就是为什么我想在列表中设置正确的bottom值。

Answer 1

使用top代替bottom并减去list位置input的高度：

list.css({
    top: inputOffset.top - list.outerHeight(),
    left: inputOffset.left
});

http://jsfiddle.net/kdez58q9/2/

Answer 2

您可以使用CSS

执行此操作

http://jsfiddle.net/Rykus0/kdez58q9/3/

（刚刚注意到你想要输入顶部...这是一个更新的小提琴，有一些调整来做到这一点：http://jsfiddle.net/Rykus0/kdez58q9/5/）

<强> HTML

<div class="dropdown">
    <input/><span class="btn">V</span>
    <div class="list" style="display:none;">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
</div>

<强> CSS

.btn {
    width: 10px;
    height:10px;
    background-color: black;
    cursor: pointer;
}

.list {
    position: absolute;
    border: solid 1px black;

    /* To make the list on top, change to bottom: 100%;*/
    top: 100%;

    left: 0;
}

.dropdown {
    position: relative;

    /* If you want the list on top, be sure to add some space above the input */
}

<强> JS

$('.btn').on('click', function(){
    $('.list').toggle();
});