jQuery/CSS：让自动完成将其他 div 向下推？答案

【问题标题】：jQuery/CSS: Making the autocomplete push other divs down?jQuery/CSS：让自动完成将其他 div 向下推？
【发布时间】：2012-09-12 20:20:00
【问题描述】：

我正在使用 xoxco jQuery 标记系统作为标记，它们的自动完成系统用于……等待它……自动完成！ http://xoxco.com/projects/code/tagsinput/

然后我通过修改 CSS 中的三个不同类来样式化这个列表：

ui-autocomplete
ui-menu-item
ui-corner-all

在这个标签窗口的正下方我有一些其他内容，我的问题是当自动完成列表出现在标签输入下方时，下面的内容不会向下移动，这使得自动完成出现在上面。

添加：

示例：http://jsfiddle.net/jQm2C/1/show/ 我想要的是将自动完成列表放在标签内。或者我想要的任何类型的标签。尤其是在 div 或 span 标签之间。

我该如何解决这个问题？

添加 #2：

在对 jQuery 进行一些研究之后，我想我可以进一步解释我想要做什么。我想将自动完成列表附加到 div 中。虽然我不知道该怎么做。

【问题讨论】：

你添加了jquery-ui css 吗？
刚刚添加了它，盒子看起来好多了。 ;P 虽然我还是遇到了同样的问题。
我不明白你想做什么
如果你在谈论改变前面的内容，你必须弄乱 z-index - 我不确定你在顶部和底部的意思 - 如果它下面的其他东西正在获取隐藏，下面的东西应该是相对定位的，当它上面的内容展开时它会移动
是的，我希望下面的内容在内容 anor 展开时移动。问题是如果你在 Chrome 的 devmode 中查看 taglist 是所有顶级 div 之一。

【解决方案1】：

终于修好了！ http://jsfiddle.net/jQm2C/7/show/

我所做的是使用此 jQuery 代码将自动完成列表 .ui-autocomplete 的“顶级”附加到名为 .test 的 div 中：

$('.test').append($('.ui-autocomplete'));

然后为列表设置样式，我编写了这个 CSS。出于某种原因，我不能将 CSS 放入 CSS 框中而不使事情停止工作：

.ui-autocomplete{
    position: static !important;
    float:none !important;
    display:inline-block;
}

【讨论】：