CSS覆盖不允许DIv在顶部

Question

嘿所有我在尝试在全屏叠加层上设置div 顶部时遇到问题。

由于某种原因，它不会覆盖叠加层的顶部 - 即使设置为更高的z-index 而不是叠加层本身。

以下是jsfiddle示例。 HELLO！应该在叠加层的顶部，但它不是：

JS：

var overlay = jQuery('<div id="overlay"> </div>');

overlay.appendTo(document.body);

CSS：

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}

#tester {
  z-index: 2001;
}

HTML：

Lots of text to create scrollbars Lots of text to create scrollbars Lots of text to create
scrollbars Lots of text to create scrollbars......<div id="tester">HELLO!</div>.......Lots
of text to create scrollbars