使列表组与 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();
}
});

这是我的小提琴：

https://jsfiddle.net/ydc8pzmw/

提前感谢！！

Answer 1

使用以下样式：

#myList {
position: absolute;
}

这会将<ul>带到文档流之外，因此不会影响以下<div>的位置。

工作小提琴