javascript – jquery选择标记没有被带到前面

2019年8月4日 114次阅读

我有以下函数,它将给定元素放在前面,并更改了几个属性.有问题的元素是一个选择框.

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>

它们处于不同的相对位置和标签中.

我不知道这可能是什么原因,任何想法？

谢谢

最佳答案 使用style属性设置时使用zIndex.例如：element.style.zIndex = 9; – 使用with .css()或使用字符串寻址样式属性名称时,需要使用z-index.

更改

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

至

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

它应该工作.

注意：您也可以将其作为$(this).css({zIndex：9999}); – 样式属性名称不在引号中.

点赞