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

Question

奇怪的一个：在我的网站上，该位置有效，但鼠标悬停和 z-indexes 无效。在小提琴上，鼠标悬停有效，但位置无效。

是否有一些我缺少的 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/