帮助html选择替换

Question

我讨厌默认选择控件，因为它无法使用CSS在IE中设置样式。 这就是我使用HTML + CSS + JavaScript从头开发一个新的选择控件的原因。 在过去的两天里，我在CSS和HTML方面做得很好，但今天我发现了一个看起来很难修复的bug。

在IE 7中，当我在同一页面上拖动控件时，顶部的控件不会覆盖底部的控件。

见图片：coolrgb dot com / files / select-help.jpg

下载演示页面（HTML + CSS + Javascript）：coolrgb dot com / files / select-help.zip

请帮帮我，这个控件看起来对我很好，我想从现在开始在我的所有项目中使用它。这个错误杀死了我的希望和很多时间。

谢谢。

Answer 1

编辑：在重新阅读问题后，这个答案现在似乎完全没有关系，但无论如何我都在这里。

不是真的答案，而是试图解释：

在Internet Explorer中，<select>标记实现为简单windowed controls，而所有其他元素都是无窗口控件（这允许对它们进行样式设置）。这就是为什么这些标签总是在顶部并且不遵循z顺序规则。 （下拉菜单部分必须是可定制的，因此它是一个无窗口控件，因此它显示在主要部分下面。）

在Firefox中，所有元素都是无窗口的，在IE8中它们也应该是无窗口的。

Answer 2

如果您为每个控件提供相同的z-index，那么您将无法控制堆叠顺序。

我建议修改你的控件以使其更像一个真正的SELECT元素：一次只能打开一个，或者失去焦点会导致它关闭。或者，您可以在控件具有焦点时设置高z-index，而在不具有焦点时设置较低的z-index。

需要注意的另一件事：尝试放置一些其他控件，如收音机，复选框，并在您的控制下选择。你可能会发现即使你给他们一个不同的z索引，IE也不会悬停在那些上面（正如@grawity在他的回答中解释的那样）。这就是为什么您通常会在这些元素的顶部看到小部件演示，如下所示：http://jqueryui.com/demos/dialog/

解决这个问题的典型方法是使用iframe，但这可能完全应该得到一个不同的问题。