Question

我正在开发一个网站，每次重新开发，有一件事我无法找到最好的实施方式。

http://www.bodas.net/看一下这个网站。您可以看到首页中有一个搜索表单，关于它的“c00l”事情是，一旦您点击该字段（“¿Que Buscas？”），它会弹出一个“建议”列表。 或关于相关内容的类别。

我正在尝试完成相同的行为，但避免加载（我已经预先显示了信息）。我相信它可以通过CSS和隐藏的div或bootstrap来完成。问题是，我不知道如何做到这一点。如何在输入框的确切位置下弹出一个浮动框。

有人可以举个例子吗？先谢谢。

Answer 1

这样的事情对你有用。

只有css。基本上我们有一个包装器div .bar，它包含输入和弹出窗口。弹出窗口有display:none，当您关注输入时，它会出现。

此外，弹出窗口position: absolute始终相对于包装器div .bar。

＆＃13;

.popup {
  display: none;
  width: 300px;
  height: 300px;
  background-color: red;
  position: absolute;
  top: 30px;
  left: 20px;
}
.foo:focus + .popup {
  display: block;
}
.bar {
  display: inline-block;
  position: relative;
}

＆＃13;

<div class="bar">
  <input type="text" class="foo">
  <div class="popup"></div>
</div>
<div class="bar">
  <input type="text" class="foo">
  <div class="popup" style="background-color: gray;"></div>
</div>

＆＃13;

输入下的浮动框

1 个答案: