css - 在位置为 :fixed 的 div 中使用输入字段时，JqueryUi 自动完成显示在错误的位置

Question

我在网页中有一个“模态窗口”，这是通过将 css 属性 position 应用到 fixed< 获得的 div/。 div 包含输入字段。特别是，我使用了 jQueryUI 的自动完成小部件。主要有两个问题:

1) 首先，由于 div 的位置是固定的，因此当您向下滚动网页时，自动完成建议不会固定显示，而是会随着页面上下移动。你可以在这个 Codepen 看到这个问题 我在其中使用了来自 jQuery 网站的带有城市名称自动完成功能的示例。

2) 第二个问题是自动完成的建议显示在页面的左上角，而不是仅在输入字段下方。不幸的是，我试图在 Codepen 中重现这个问题，但我做不到。

我很确定问题出在 CSS，尤其是 JQuery-UI 提供的此类样式属性。也许可以通过使用 position option 来解决问题。自动完成小部件。

我应该定义什么 CSS 属性以及如何定义？

PS:我使用 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css提供的主题。

Answer 1

查看 jQuery UI 库，我看到

元素用于显示建议。 jQuery UI 默认将此元素附加到 HTML 文档，而不附加到文本 input 的
(用作“模态窗口”)。

但是，文档显示选项 appendTo 配置自动完成

应该附加到哪个元素。它使用 jQuery 的 appendTo() 函数。 http://jqueryui.com/demos/autocomplete/#option-appendTo

所以，我包含了一个包含建议的 div:

<input type="text" id="myInput" />
<div id="container">
</div>

并且在 autocomplete() 函数中我添加了选项:

appendTo: "#container"

然后我添加了下面的CSS

#container {
    display: block; 
    position:relative
} 
.ui-autocomplete {
    position: absolute;
}

就是这样!

关于css - 在位置为 :fixed 的 div 中使用输入字段时，JqueryUi 自动完成显示在错误的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12234802/