固定定位搜索框，其中包含自动填充建议

Question

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

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

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

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

自动填充建议框的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 ：

以下代码添加到autocomplete 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 */
    }

此致

Answer 1

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

Answer 2

position:fixed不是你做你想做的事情的方法。

位置：绝对应该已经解决了你的问题，虽然这让我觉得它们是浏览器错误（浏览器已经测试过哪些）或插件或css中的某些东西用position:absolute覆盖position:fixed - 你在Firefox中检查过FireBug以查看应用于下拉框的实际CSS吗？

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

Answer 3

position：容器上的相对，包含结果列表（其位置为：absolute）解决了问题。