使用Javascript和CSS定位弹出窗口

Question

我的Web应用程序有一个搜索字段，用户可以在其中输入一些标签进行搜索。 该窗口应在搜索字段下方弹出，如下图所示：

我需要了解的主要细节是如何实现窗口定位。 它是具有绝对位置和z-index的隐藏div吗？ 我对最常用的Vanilla Javascript，HTML5和CSS方法感兴趣。

Answer 1

建议框是自动完成组件。 您可以很好地使用James Smith（ http://loopj.com/jquery-tokeninput/ ）的jQuery令牌输入

就职位好奇心而言：

这只是与输入元素的底部对齐的问题。 可以使用纯CSS完成。

 input { width: 50%; } .spanClass { display: none; } .focusAlign input[type="text"]:focus~.spanClass { display: block; width: 50%; box-sizing: border-box; position: absolute; top: 29px; left: 8px; background: #333; padding: 3px; font: .75em sans-serif; color: #eee; } 

 <div class="focusAlign"> <input id="same" type="text" value="" /> <span class="spanClass"> <p>Oh, this is a suggestion.</p> <p>Yeah, well, so am I.</p> <p>Me, too!</p> <p>Whatever, I'm here.</p> </span> </div>