使列表组与 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>

这是我的 CSS

.myList {
  position: relative;
}

.below {
  position: absolute;
}

这是我的 javascript:

$("#myList").hide()

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

这是我的 fiddle:

https://jsfiddle.net/ydc8pzmw/

提前致谢！！

Answer 1

使用这种风格：

#myList {
  position: absolute;
}

这会将 <ul> 置于文档流之外，因此不会影响以下 <div>.

的位置

Working Fiddle

使列表组与 div 重叠

Make list group overlap with div

css

overlap