Make list Gruppenüberlappung mit div

Question

Kann mir jemand helfen, meine Listengruppe mit einer <div> überlappen, die einen Absatz enthält, wenn ein Benutzer Text in ein Eingabefeld eingibt? Ich habe versucht, das <ul> Element machen position:relative und den Absatz position:absolute aber ohne Erfolg ...

Hier mein HTML ist:

<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> 

Hier ist meine CSS

.myList { 
    position: relative; 
} 

.below { 
    position: absolute; 
} 

Hier ist mein javascript:

$("#myList").hide() 

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

hier ist meine Geige:

https://jsfiddle.net/ydc8pzmw/

Vielen Dank im Voraus !!

Answer 1

Mit diesem Stil:

#myList { 
    position: absolute; 
} 

dass die <ul> außerhalb des Dokumentenflusses nehmen, so dass es nicht um die Platzierung der folgenden <div> auswirken wird.

Working Fiddle