如何在动态ul下面定位div

Question

我有一个ul / li，只有onkeyup事件才能看到。 如果输入字段为空，则ul / li消失（隐藏），所有操作都使用纯JavaScript和Jquery完成。 问题是我想在ul / li下面放置一个div（当它可见时）。 我怎么做？我应该使用像position这样的CSS：绝对/相对/固定（到目前为止还没有用），还是我必须使用JavaScript？

Answer 1

包装ul和div，然后显示/隐藏包装器而不是ul：

<div id="wrapper">
   <ul> <li> ... </li> </ul>
   <div>the div you want below the ul</div>
</div>

Answer 2

纯CSS有两种选择：

1）使用absolute位置。

2）给予父元素relative位置和你的div（孩子）absolute位置，以便孩子不会逃脱父母。最后使用top，left，bottom，right属性将元素准确定位到您想要的位置。

Answer 3

如果在onkeyup偶数发生之前“底层”div也应该不可见，请以与切换ul相同的方式切换其可见性。

如果“underneath”div始终可见，则可以在ul上使用visibility: hidden代替display: none。这将使ul不可见，但会保留其在页面流中的位置。

Answer 4

它必须与绝对定位一起工作，但要注意在同一父级中使用位置相对或绝对，这非常重要。