JQuery select tag not brought to the fore

Question

I have the following function, which brings this element to the forefront and changes a couple of properties. This item is a selection field.

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); } 

The code works, everything except zIndex - although the element is indeed updated to have this value, it does not seem to be affected. When the height of the selection window expands, it overlaps another selection box (essentially identical) in the line below it. What is in front of this selection field. No matter what I set zIndex for these fields, it always stays on top.

The HTML of the fields after the action is as follows: the one that should be on top.

 <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> 

One that should be lower (but on top):

 <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> 

They are in different relative positions.

and tags.

I can’t understand what is the reason for this, any thoughts?

thanks

Answer 1

It turns out that the problem can be solved by setting the z-index of the parent elements (not the direct parent, but the highest parent at the same level as for me, this is a tag

about 4 nodes. Interestingly, the only elements that affected it were the selection flags, since the text fields and labels that I had were not affected. Indeed, the element

which required the z-index set also appeared under the element.

Very strange, but now decided. And good to remember.

Answer 2

zIndex used when you set it using the style property. for example: element.style.zIndex = 9; - when using with .css() or when accessing the name of a style property using a string, you need to use z-index .

Edit

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

to

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

and it should work.

Note. You can also do this as $(this).css({zIndex: 9999}); - If the name of the style property is not quoted.