user1547174 user1547174 - 1 year ago 67
CSS Question

Make list group overlap with div

Can someone help me make my list group overlap with a

that contains a paragraph whenever a user types text in an input box? I tried making the
and the paragraph
but without success...

Here is my HTML:

<input type="text" id="myInput" placeholder="Enter text here..." />
<ul id="myList">

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

Here is my CSS

.myList {
position: relative;

.below {
position: absolute;

Here is my javascript:


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

here is my fiddle:

Thanks in advance!!

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download