javascript - jquery select tag not being brought to front -

i have following function, brings given element front, , changes couple of properties. element in question select box.

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, except zindex - while element updated have value, seems have no affect. when select box's height expanded, overlaps select box (essentially identical) in row below it. in front of select box. regardless of set boxes zindex to, remains on top.

the html of boxes after action follows: 1 should 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> 

the 1 should below (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 carrier id: ">     <option></option>     .... </select> 

they in different relatively positioned

, tags.

i can't see cause of be, thoughts?

thanks

zindex used when setting using style property. example: element.style.zindex = 9; - when doing using .css() or when addressing style property name using string, need use z-index.

change

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

to

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

and should work.

note: can $(this).css({zindex: 9999}); - style property name not in quotes.