4

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

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的高度扩展时，它在其下方的一行中重叠了另一个选择框（本质上相同）。位于此选择框的前面。无论我将框 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>

它们处于不同的相对位置

和标签。

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

谢谢

4

2 回答 2

2

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

改变

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

到

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

它应该可以工作。

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

于 2013-05-19T06:15:40.280 回答
0

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

在链上标记大约 4 个节点。有趣的是，受此影响的唯一元素是选择框，因为我拥有的文本区域和标签不受影响。确实

需要 z-index 集的元素也出现在该项目下。

很奇怪，但现在解决了。一个值得记住的好东西。

于 2013-05-21T14:05:50.977 回答