兄弟のdivの最上部に揃えます

Question

dropdownContainerをinputContainerの下に置きますが、dropdownContainerはautocompleteContainerの範囲に入れません。

スクロールすると、dropdownContainerはinputContainerと一緒に移動する必要があります。トークンdivが削除または追加された場合と同じです。

私はポジション削除する場合：dropdownContainerから絶対にそれが正しく整列、私はJS/jQueryのせずにこれを行うことを好むだろうが、他に選択肢がない場合、私はそれを使用しますautocompleteContainer

の内側に表示されます。ここで

はcodepenリンクです：http://codepen.io/rishadjb/pen/LRxzpN

ありがとうございました。

.mainContainer{ 
 
    width:700px; 
 
    position: relative; 
 
} 
 
.autocompleteContainer{ 
 
    background: none repeat scroll 0 0 #ececec; 
 
    float: left; 
 
    width: 100%; 
 
/* height:60px; */ 
 
    max-height: 100px; 
 
    z-index: 1; 
 
    padding: 4px 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    cursor: text; 
 
    text-align: left; 
 
    background-color: #e4e4e4; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 

 
.token{ 
 
     background-color: #f7982f; 
 
    border-radius: 10px; 
 
    color: #fff; 
 
    display: flex; 
 
    font-family: sans-serif; 
 
    font-size: 13px; 
 
    font-weight: 400; 
 
    margin: 2px; 
 
    padding: 2px 5px; 
 
} 
 

 
.inputContainer{ 
 
     flex-grow: 1; 
 
    position:relative; 
 
} 
 

 
.autoCompleteInput{ 
 
     border: medium none; 
 
    outline: none; 
 
    width: 100%; 
 
    padding: 2px 12px; 
 
    background: transparent; 
 
    color: #008cc1; 
 
} 
 

 
.dropdownContainer{ 
 
    height:60px; 
 
    width:100%; 
 
    position:absolute; 
 
    background:red; 
 
    z-index:999; 
 
    border:1px solid blue; 
 
}

<div class="mainContainer"> 
 
    <div class="autocompleteContainer"> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    
 
    <div class="inputContainer"> 
 
     <input class="autoCompleteInput" value='inputText'/> 
 
    </div> 
 
    
 
    <div class="dropdownContainer">Dropdown Container</div> 
 
    
 
    
 
    </div> 
 
</div>

Answer 1

.autocompleteContainerが浮かぶように持っていますか？あなたがその宣言を削除する場合は、あなたがする必要があるすべてはdropdownContainerに追加することです：

.dropdownContainer{ 
    left: 0; 
    top: 100%; 
}