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>的展示位置。

Working Fiddle

使列表组与div重叠

1 个答案: