5

在我的 webapp 中，我在网页顶部的固定工具栏中有一个搜索框。我像这样实现了工具栏的固定位置....

#toolbar {
        position: fixed !important; 
        position: absolute;
        height: 25px;
        width: 100%;
        top: 0px;
        left: 0px;
        margin: 0;
        z-index: 100;
        font-size: 12px;
    }

现在，我正在使用jQuery 插件在其上实现关键字自动完成功能。

我的问题是如何在窗口滚动/调整大小时保持自动完成建议固定/附加到搜索框。

自动完成建议框的 css 是....

element.style {
   display:none;
   left:166px;
   position:absolute;
   top:96px;
   width:130px;
}
.ac_results {
   background-color:white;
   border:1px solid #C5DBEC;
   overflow:hidden;
   padding:0;
   z-index:99999;
}

我执行这些操作时遇到问题..

  1. 在搜索框中输入内容，导致出现建议
  2. 打开搜索框，我滚动窗口。
  3. 这会导致自动建议框也被滚动。

我能做些什么来解决这个错误？

这是它的外观。

替代文字

自动完成已滚动到固定位置的输入框。

更新1：我尝试添加position: fixed;到自动完成。

这在不同的情况下会出现问题。

  • 在搜索框中输入内容，导致出现建议
  • 按退出键，导致框消失
  • 向下滚动窗口
  • 在搜索框中输入内容，导致出现建议
  • 现在搜索框出现在滚动前出现的位置，因为位置是固定的

更新：

替代文字

更新 2：

添加到自动完成 css 的以下代码可以解决问题。

.ac_results {
       background-color:white;
       border:1px solid #C5DBEC;
       overflow:hidden;
       padding:0;
       z-index:99999;
       position: fixed;
       top: 0px;
       margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
    }

问候

4

3 回答 3

3

为什么不做搜索结果position: fixed呢？只要您知道文本框的高度，就可以定位结果列表，使其始终位于文本框元素的下方。

于 2010-08-25T10:01:35.887 回答
1

容器上的位置：相对，包含结果列表（具有位置：绝对）解决了这个问题。

于 2014-08-26T07:50:32.457 回答
0

position:fixed不是做你所追求的方法。

position:absolute 应该已经解决了您的问题，但这让我认为它们是浏览器错误（您测试了哪些浏览器）或者插件或 css 中的某些内容正在覆盖position:absolute-position:fixed您是否在 Firefox 中检查了 FireBug 以查看实际的 CSS应用于下拉框？

这些是我能想到的唯一两个原因来解释你所看到的。

于 2010-08-25T10:23:20.113 回答