Html CSS-无法在Internet Explorer中正确应用z索引

我已经编写了一个jQuery脚本，用一些DIV和UL替换元素，允许我模拟原始的SELECT，但也允许我设置样式。到目前为止，除了一些小错误外，它工作得相当不错

但是，在Internet Explorer中，“选项”div在div下面的元素下面呈现

以下是HTML：

<div class="styledSelect-parent" style="display: inline-block; width: 59px;">
   <div class="styledSelect-newSelect" style="position: relative;">
      <input class="styledSelect-newSelect-selector" style="width: 59px;" readonly="readonly" name="hello" value="Test1" type="text">
      <div class="styledSelect-newSelect-options" style="display: none; z-index: 20; width: 59px; position: absolute; left: 0px; top: 18px;">
         <ul>
            <li>Test1</li>
            <li>Test2</li>
            <li>Test3</li>
            <li class="styledSelect-active">Test4</li>
            <li>Test1</li>
            <li>Test2</li>
         </ul>
      </div>
   </div>
</div>

<br /><br />

<div class="styledSelect-parent" style="display: inline-block; width: 59px;">
   <div class="styledSelect-newSelect" style="position: relative;">
      <input class="styledSelect-newSelect-selector" style="width: 59px;" readonly="readonly" name="hello" value="Test1" type="text">
      <div class="styledSelect-newSelect-options" style="display: none; z-index: 20; width: 59px; position: absolute; left: 0px; top: 18px;">
         <ul>
            <li class="styledSelect-active">Test1</li>
            <li>Test2</li>
            <li>Test3</li>
         </ul>
      </div>
   </div>
</div>

如果打开第一个选择框，则LI列表位于第二个选择框的下方，而不是上方。我无法使z索引正常工作

我错过了什么/

---

编辑：我应该指出HTML是从jQuery动态生成的。可以找到完整的代码。

在Internet Explorer中，定位元素生成一个新的堆叠上下文，从z索引值0开始。因此，z索引不能正常工作

你有这方面的实例吗？没有，但我已经把代码上传到了Slerxy。因此，将其保存在本地，这样应该很好。您在这里提供的源代码的工作示例：问题到底是什么？这完全显示为在FF上本地运行。解决方法是在需要“浮动”的元素/块下方使用iframe垫片。Mootools和我相信jQuery有一个插件可以自动完成这项工作。