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

Question

奇怪的是:在我的网站上，位置有效，但鼠标悬停和 z 索引不起作用。在 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/