動的ulの下にdivを配置する方法

Question

私はul/liを持っています。これはonkeyupイベントでのみ表示されます。 入力フィールドが空の場合、ul/liは消えます（非表示）。すべてがプレーンJavaScriptとJqueryで行われます。 問題は、ul/li（表示されているとき）の下にdivを配置したいということです。 どうすればいいですか？私はCSSのようなポジションを使うべきでしょうか？絶対/相対/固定（これまでにはうまくいきませんでした）、またはこれにJavaScriptを使用する必要がありますか？

1）absolute位置を使用して：あなたは純粋なCSSとの2つのオプションがあり

<div id="wrapper"> 
    <ul> <li> ... </li> </ul> 
    <div>the div you want below the ul</div> 
</div> 

Answer 1

：

Answer 2

はラップその後、ULおよびDIVとは/ではなく、ULのラッパーを隠します。

2）親要素relativeの位置とdiv（子）absoluteの位置を指定して、子が親から逃げないようにします。最後に、top、left、bottom、rightのプロパティを使用して、必要な場所に要素を正確に配置します。

Answer 3

onkeyupまで「underneath」divも表示されないようにするには、ulを切り替えるのと同じ方法で表示を切り替えます。

"underneath" divを常に表示する必要がある場合は、ulにdisplay: noneの代わりにvisibility: hiddenを使用できます。これによりulは見えなくなりますが、ページフロー内の位置は保持されます。

Answer 4

これは絶対的な位置付けでも動作する必要がありますが、同じ親で相対位置または絶対位置の両方を持つように注意してください。これは非常に重要です。