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