入力要素に応じてDIVを配置する

Question

ユーザーがINPUT要素にテキストを入力すると、DIVが表示されます。私はこれをAJAXで行うことができます。しかし、私はDIVをINPUT要素の下に置くことはできません。 DROPDOWNリストのように表示させたいユーザINPUTによって変化するDIVの内容。私はどこでも検索しましたが、何も見つかりませんでした。 CSSまたはJSが便利です。 はここに私のコードです：そのコードで

<tr> 
    <th align="left">Görevli Olduğu Kurum Kodu (Farklı bir kurumda görevli ise)</th> 
    <td> 
     <input type="text" id="gkrm" name="gkrm" value="" onkeyup="AJAXCODE_TO_LOAD_DIV_CONTENT"> 
     <div id="gkrmlist"> 
     </div> 
    </td> 
</tr> 

、私は gkrmlist DIVが gkrm INPUTの下に表示されるようにしたいです。しかし、それはINPUT要素の右側に現れます。

You can see the image by clicking the link. 緑色の矢印で示されている位置に赤い円でDIVを配置したいとします。

Answer 1

divの入力を絶対値として設定するには、その親にposition: relativeを追加する必要があります。次にDIVするabsolute、位置"absolute"とleft、right、top

.input-container { 
 
    position: relative; 
 
} 
 

 
.input-container .input-dropdown { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: calc(100% - 1px); 
 
    background-color: blue; 
 
    color: #fff; 
 
}

<table> 
 
    <tr> 
 
     <th align="left">Görevli Olduğu Kurum Kodu (Farklı bir kurumda görevli ise)</th> 
 
     <td class="input-container"> 
 
      <input type="text" id="gkrm" name="gkrm" value="" onkeyup="AJAXCODE_TO_LOAD_DIV_CONTENT"> 
 
      <div class="input-dropdown" id="gkrmlist">this is div 
 
      </div> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 2

要素を設定位置"relative"との最初の親要素に応じて自分自身を配置しました。

親要素の位置を"relative"に設定することは非常に必要です。

はここでHTMLとCSSのコードにある

HTML：

<tr> 
    <th align="left">Görevli Olduğu Kurum Kodu (Farklı bir kurumda görevli ise)</th> 
    <td class="rel"> 
     <input type="text" id="gkrm" name="gkrm" value="" onkeyup="AJAXCODE_TO_LOAD_DIV_CONTENT"> 
     <div id="gkrmlist"> 
     </div> 
    </td> 
</tr> 

CSS：

.rel { 
    position: relative; 
    width: 200px; 
} 
#gkrmlist { 
    position: absolute; 
    top: 100%; 
    width: 200px; 
    left: 0px; 
} 

お楽しみください！