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之外 - 当元素确实更新为具有此值时，它似乎没有任何影响。当展开选择框的高度时，它会在其下方的一行中与另一个选择框（基本相同）重叠。这是在这个选择框的前面。无论我将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}); - 样式属性名称不在引号中。

Answer 2

事实证明，问题可以通过设置父元素的z-index来解决（不是直接父元素，而是与我相同级别的最高父元素，这是

链上有4个节点的标签。有趣的是，受此影响的唯一元素是选择框，因为我的textareas和标签不受影响。实际上需要z-index集的

元素也是出现在该项目下。

非常奇怪，但现在已经解决了。还有一个值得记住的好事。

jquery选择标签没有被带到前面

2 个答案: