使用Javascript和CSS定位弹出窗口

Question

My web application has a search field where user can enter some tags to search by. The window should pop-up just under the search field, like in the picture below:

The main detail I need to understand is how is the window positioning implemented. Is it some hidden div with absolute positioning and z-index? I am interested in the most common Vanilla Javascript, HTML5, and CSS approaches.

Answer 1

The suggestion box is an autocomplete component. You could very well use the jQuery Token Input by James Smith ( http://loopj.com/jquery-tokeninput/ )

As far as the position curiosity:

It's just a matter of alignment to the bottom of the input element. That can be done using pure 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>