Make list group overlap with div

Question

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

What do you mean by "overlap"? Should the list group be moved up so that it is closer to the input text box; or, something else? — JohnH, Nov 21 '16 at 20:11
See https://jsfiddle.net/1qffmnue/. Is that not what you're trying to accomplish? — Rick Hitchcock, Nov 21 '16 at 20:11
oh yes that's perfect @RickHitchcock... i had a typo when i tried it the first time.. Thanks!! — Trung Tran, Nov 21 '16 at 20:13

score 1 · Accepted Answer · answered Nov 21 '16 at 20:13

1

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

answered Nov 21 '16 at 20:13

Rick Hitchcock

35,202
5
48
79

Make list group overlap with div

1 Answers1