javascript - jquery select 标签没有被带到前面

Question

我有以下功能，它将给定的元素带到前面，并更改几个属性。有问题的元素是一个选择框。

function expandTags(event){
  var pos = $(this).position();
  $(this).css("position", "absolute");
  $(this).css("left", pos.left + "px");
  $(this).css("top", pos.top + "px");
  $(this).css("height", $(this)[0].scrollHeight + 20 + "px");
  $(this).attr("size", $(this).data("list_item").data("tags").names.length);
  $(this).css("zIndex", 9999);
}

代码有效，除了 zIndex - 虽然元素确实更新为具有此值，但它似乎没有任何影响。当Select Box的高度扩展时，它在其下方的一行中重叠了另一个选择框(本质上是相同的)。在此选择框的前面。无论我将 boxes zIndex 设置为什么，它始终保持在顶部。

操作后框的 HTML 如下:应该放在最上面的那个。

<select style="width: 100px; height: 173px; position: absolute; z-index: 9999; left: 252px; top: 0px;" size="11" class="tags" name="StaggeredMessage[0][message][tags]" id="StaggeredMessage_0_message_tags" >
    <option></option>
    ....
</select>

应该在下面(但在上面)的那个:

<select style="width: 100px; height: 80px; position: relative; z-index: 100;" size="4" id="StaggeredMessage_1_message_tags" name="StaggeredMessage[1][message][tags]" class="tags" title="Default for Carrier Id: ">
    <option></option>
    ....
</select>

它们在不同的相对位置

和标签中。

我看不出这可能是什么原因，有什么想法吗？

谢谢

Answer 1

zIndex 在您使用 style 属性设置时使用。例如:element.style.zIndex = 9; - 使用 with .css() 或使用字符串寻址样式属性名称时，您需要使用 z-index。

改变

$(this).css("zIndex", 9999);

到

$(this).css("z-index", 9999);

它应该可以工作。

注意:您也可以使用 $(this).css({zIndex: 9999}); - 样式属性名称不在引号中。