script.aculo.us 自动完成卡在输入元素后面答案

【问题标题】：script.aculo.us autocomplete stuck behind input elementsscript.aculo.us 自动完成卡在输入元素后面
【发布时间】：2010-12-17 15:17:32
【问题描述】：

我在一个页面上有几个 script.aculo.us Ajax.Autocomplete 控件，当呈现下拉 div 时，无论我对 zIndex 和定位做什么，它总是卡在页面上的其他文本框后面。问题出现在 IE 和 FF 中。还有其他人遇到这个吗？我错过了什么，或者这只是有这个控件的生活？

【问题讨论】：

你能给个样品吗？我使用过 Prototype/Scriptaculous 和 Autocomplete 一直对我有用。 ;D

标签： ajax scriptaculous z-index

【解决方案1】：

好吧，在我尝试将所有内容简化为基础以发布示例时，我实际上设法修复了它。两部分解决方案。首先，我不得不放弃控件中的所有 z-index 定义。他们是问题的一部分。其次，我必须进入自动完成控件的显示功能并添加：“update.style.zIndex = 1000;”到功能。我的自动完成下拉 div 现在根据需要位于控件上方。也许还有另一种方法可以避免修改 script.aculo.us 代码，但我很高兴它可以正常工作。

【讨论】：

【解决方案2】：

四页的 google'ing，以及稍后修改源代码的时间......好吧，这可能已经有一年的历史了，但我想出了如何在 1.8.3 版中做到这一点，这是为了谁碰到这个。

通过 z-index 让多个 div 相互叠加：

首先，您需要一个全局变量。即：

var global_zindex

然后当你初始化新的可拖动对象时，在 onStart 中，给它增量：

onStart : function(){
  zIndex++;
},

现在我们将 dragdrop.js:435 编辑为如下所示：

  this.element.style.zIndex = global_zindex //this.originalZ; // HACK HACK HACK

然后 bam，div 的堆突然正确。花了这么长时间，我不得不在这里发布。

【讨论】：