user1547174 user1547174 - 18 days ago 6
CSS Question

Make list group overlap with div

Can someone help me make my list group overlap with a

<div>
that contains a paragraph whenever a user types text in an input box? I tried making the
<ul>
element
position:relative
and the paragraph
position:absolute
but without success...

Here is my 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>


Here is my CSS

.myList {
position: relative;
}

.below {
position: absolute;
}


Here is my javascript:

$("#myList").hide()

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


here is my fiddle:

https://jsfiddle.net/ydc8pzmw/

Thanks in advance!!

Answer

Use this style:

#myList {
  position: absolute;
}

That will take the <ul> outside the document flow, so it won't affect the placement of the following <div>.

Working Fiddle