リストグループをdivと重複させる

Question

ユーザが入力ボックスにテキストを入力するたびに段落を含む<div>でリストグループを重複させる手助けはできますか？私は<ul>要素を作ってみましたposition:relativeと段落position:absoluteが、成功せず...ここ

は私のHTMLです：

ここ

<div> 
    <input type="text" id="myInput" placeholder="Enter text here..." /> 
    <ul id="myList"> 
    <li>Uno</li> 
    <li>Dos</li> 
    <li>Tres</li> 
    <li>Cuatro</li> 
    <li>Cinco</li> 
    <li>Siete</li> 
    <li>Ocho</li> 
    </ul> 
</div> 

<div class="below"> 
    <p> 
    this is a basic paragraph that should be overlapped by the list group... 
    </p> 
</div> 

ここ

.myList { 
    position: relative; 
} 

.below { 
    position: absolute; 
} 

私のCSSで私のjavascriptです：

$("#myList").hide() 

$("#myInput").on('input', function() { 
    if($("#myInput").val().length > 0) { 
     $("#myList").show(); 
    } else { 
    $("#myList").hide(); 
    } 
}); 

ここは私のフィドルです：

https://jsfiddle.net/ydc8pzmw/

ありがとうございます！

Answer 1

使用このスタイル：それは、次の<div>の配置に影響を与えないように

#myList { 
    position: absolute; 
} 

、ドキュメントフローの外<ul>がかかります。あなたの問題を解決 `;：

Working Fiddle