jquery - 定位元素未正确放置 & z-index 不工作

Question

奇怪的是:在我的网站上，位置有效，但鼠标悬停和 z-indexes 无效。在 fiddle 上，鼠标悬停有效，但位置无效。

是否缺少某些 CSS 设置导致 jQuery 无法选择？

我希望这只是错误的代码或一些我不知道的细微差别。

非常感谢!

html

<div style="text-align: center; position: relative">
    <span id="selectSupplierNameSpan" style="z-index:100">
        Vendor
    </span>
    <div id="selectSupplierNameContainer" style="position: absolute; opacity: 0; z-index:50">
        <input type="text" id="selectSupplierName" ></input>
    </div>
</div>​

jQuery

$("#selectSupplierNameContainer").position({
    my: "center",
    at: "center",
    of: $("#selectSupplierNameSpan"),
});

$("#selectSupplierNameSpan").mouseover(function() {
    var thisHeight = $("#selectSupplierNameContainer").height();
    $("#selectSupplierNameContainer").animate({
        opacity: 1,
        top: "+=" + thisHeight
    }, 500);
});​

http://jsfiddle.net/7s4VN/10/

编辑

转到 jquery 1.7.2，并添加了 ui 1.18，现在鼠标悬停不起作用。

Answer 1

z-index只能应用于定位元素。添加position:relative; <span> 的样式它工作正常。

http://jsfiddle.net/mblase75/7s4VN/11/