javascript：将绝对div与另一个div对齐

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

如何计算列表的正确

底部css属性

，使其显示在输入的正上方

示例代码：

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>

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

JS

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

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

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

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

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

.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 */
}

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

注意： 输入将像过滤器一样工作，因此列表的高度将发生变化。

---

我想让浏览器保持列表对齐。这就是为什么我想在列表上设置一个适当的

底部

值。

使用

顶部

而不是

底部

，并从

输入位置减去
列表
的高度：

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


您可以使用CSS实现这一点


（刚刚注意到您希望将输入放在顶部……这里有一个更新的小提琴，其中有一些调整：）

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>

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

JS

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

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

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

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

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

.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 */
}

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

你如何纠正任何正确的事情？请阅读您自己的问题并更正。那么您正试图使列表显示在输入和按钮的正上方？这很好，但输入将像过滤器一样工作，因此列表的高度将发生变化。我想让浏览器保持列表对齐。这就是为什么我想在列表上设置一个合适的底部值。看起来不错，但我的组件不是那么简单。列表将作为主体的子级呈现，但输入和按钮可以在dom中的任何级别上。我明白了，因此这两个可能无法在dom中具有相同的祖先。我不确定您的浏览器要求是什么，但您可以查看HTML5的
datalist
元素并输入
list
属性。这里有一个来自Wufoo的演示。下面是多填充的列表：