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